前言
我们在前端开发中经常会安装一些npm包，当你在前端开发有一段时间之后你也会知道，那些npm包实际上就是别人写好的一些代码来供你调用，那么今天就来讲讲如何通过Vite + TS 来发布一个属于自己的npm包
使用Vite建立项目
安装Vite
在你想要建立的项目的文件下使用
npm create vite [project-name]npm create vite [project-name]npm create vite [project-name]
→ vanilla
→ TypeScript
到这里项目就建立好了，进入项目之后输入
npm install# 可有可无git initnpm install # 可有可无 git initnpm install # 可有可无 git init
项目结构
在自动生成的项目中，可以根据自己的需求删除一些无用文件。
实际上一个npm包最重要的东西就是package.json这个文件
| ? 一个 NPM 模块 只 需要包含一个带有 name 和 version 属性的 package.json 文件。
当然package.json这个文件是最重要的，我们按照流程放到后面来讲！
写一些简单的方法作为内容
比如在utils.ts文件中写一个类型判断函数
/*** 判断7种基本类型和对象、数组类型，返回类型名字符串* @param value* @returns 类型名*/export function getType(value:unknown): string {const type: string = typeof value;if(type === 'object') {if(value instanceof Array){return 'Array';}else if(value instanceof Object){return 'Object';}else if(value === null){return 'null';}}return type;}/** * 判断7种基本类型和对象、数组类型，返回类型名字符串 * @param value * @returns 类型名 */ export function getType(value:unknown): string { const type: string = typeof value; if(type === 'object') { if(value instanceof Array){ return 'Array'; }else if(value instanceof Object){ return 'Object'; }else if(value === null){ return 'null'; } } return type; }/** * 判断7种基本类型和对象、数组类型，返回类型名字符串 * @param value * @returns 类型名 */ export function getType(value:unknown): string { const type: string = typeof value; if(type === 'object') { if(value instanceof Array){ return 'Array'; }else if(value instanceof Object){ return 'Object'; }else if(value === null){ return 'null'; } } return type; }
然后把这些统一在main.ts中导出
import { getType } from "./utils"export { getType }//或者直接export { getType } from "./utils"import { getType } from "./utils" export { getType } //或者直接 export { getType } from "./utils"import { getType } from "./utils" export { getType } //或者直接 export { getType } from "./utils"
好的，到这里的时候你已经有了一个npm包了，但是没有发到平台上。
为TS文件生成类型文件
如果你是使用的JS，那么可以直接跳过这步，如果你使用的是TS那你一定要看下去，不要再傻傻的手写了！
首先配置vite.config.ts
首先需要在vite.config.ts中进行一些基础的build所需配置
export default defineConfig({build: {outDir: 'dist', // 自定义构建输出目录target: 'es2020',lib: {entry: 'src/main.ts', // 入口文件路径formats: ['es', 'cjs']}},server: {port: 8080, // 自定义开发服务器端口},});export default defineConfig({ build: { outDir: 'dist', // 自定义构建输出目录 target: 'es2020', lib: { entry: 'src/main.ts', // 入口文件路径 formats: ['es', 'cjs'] } }, server: { port: 8080, // 自定义开发服务器端口 }, });export default defineConfig({ build: { outDir: 'dist', // 自定义构建输出目录 target: 'es2020', lib: { entry: 'src/main.ts', // 入口文件路径 formats: ['es', 'cjs'] } }, server: { port: 8080, // 自定义开发服务器端口 }, });
其次新建tsconfig.build.ts
其次是重点的部分，我们需要在根目录下新建一个tsconfig.build.ts来自动的生成类型文件
// tsconfig.build.json{"extends": "./tsconfig.json", // 拓展 tsconfig.json 的配置"compilerOptions": {"noEmit": false, // 允许生成文件"declaration": true, // 需要设置为 true 来支持类型"emitDeclarationOnly": true, // 只生成类型文件"declarationDir": "lib" // 类型文件的导出目录},"include": ["src"] // 编译目标仅为 src 文件夹下的文件}// tsconfig.build.json { "extends": "./tsconfig.json", // 拓展 tsconfig.json 的配置 "compilerOptions": { "noEmit": false, // 允许生成文件 "declaration": true, // 需要设置为 true 来支持类型 "emitDeclarationOnly": true, // 只生成类型文件 "declarationDir": "lib" // 类型文件的导出目录 }, "include": ["src"] // 编译目标仅为 src 文件夹下的文件 }// tsconfig.build.json { "extends": "./tsconfig.json", // 拓展 tsconfig.json 的配置 "compilerOptions": { "noEmit": false, // 允许生成文件 "declaration": true, // 需要设置为 true 来支持类型 "emitDeclarationOnly": true, // 只生成类型文件 "declarationDir": "lib" // 类型文件的导出目录 }, "include": ["src"] // 编译目标仅为 src 文件夹下的文件 }
最后配置一下build
最后在我们的package.json中修改一下我们的build设置，以便在每次build的时候都能够生成对应的类型文件在lib文件夹下
// package.json"scripts": {"dev": "vite","build": "vite build && tsc -p tsconfig.build.json", // 修改成这样"preview": "vite preview"},// package.json "scripts": { "dev": "vite", "build": "vite build && tsc -p tsconfig.build.json", // 修改成这样 "preview": "vite preview" },// package.json "scripts": { "dev": "vite", "build": "vite build && tsc -p tsconfig.build.json", // 修改成这样 "preview": "vite preview" },
完成后运行命令npm run build
package.json 配置
script和依赖的配置大家都知道是什么，就不在这边阐述了。
{"name": "utils-first-npm-package","private": false,"version": "0.1.0","type": "module","types": "lib/main.d.ts","main": "dist/utils-first-npm-package.cjs","module": "dist/utils-first-npm-package.js",}{ "name": "utils-first-npm-package", "private": false, "version": "0.1.0", "type": "module", "types": "lib/main.d.ts", "main": "dist/utils-first-npm-package.cjs", "module": "dist/utils-first-npm-package.js", }{ "name": "utils-first-npm-package", "private": false, "version": "0.1.0", "type": "module", "types": "lib/main.d.ts", "main": "dist/utils-first-npm-package.cjs", "module": "dist/utils-first-npm-package.js", }
- name: 包名
- private: 是否私有，私有就不能发到公共平台
- version: 版本号
- type: 文件的默认加载方式，若不填则默认为commonJs。但是无论
package.json中的type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理 - types: ts类型文件路径
- main: commonJs的包路径
- module: ESModule的包路径
到这里就是一个基础的配置，了解这些就能解决首次发布的基本问题。
登录NPM账号并且发布
这边是默认已经拥有了NPM账号的，如果没有的话移步官网 www.npmjs.com/ 注册并创建 npm 账号。
-
检查npm并切换回npm源
我是用的
nrm管理的使用nrm use npm如果是没有用源管理的话就直接
npm config set registry https:*//registry.npmjs.org/* -
登录NPM
“`Bash
// 登陆
npm login// 控制台会提示输入相关信息Log in on <https://registry.npmjs.org/>Username: // 用户名Password: // 密码Email: (this IS public) // 邮箱Enter one-time password: // 一般是邮箱内查收Logged in as xxx on <https://registry.npmjs.org/>.```// 控制台会提示输入相关信息 Log in on <https://registry.npmjs.org/> Username: // 用户名 Password: // 密码 Email: (this IS public) // 邮箱 Enter one-time password: // 一般是邮箱内查收 Logged in as xxx on <https://registry.npmjs.org/>. ```
// 控制台会提示输入相关信息 Log in on <https://registry.npmjs.org/> Username: // 用户名 Password: // 密码 Email: (this IS public) // 邮箱 Enter one-time password: // 一般是邮箱内查收 Logged in as xxx on <https://registry.npmjs.org/>. ``` -
运行发布命令
// 发布！npm publish// 发布！ npm publish
// 发布！ npm publish
注意点：
- 私有选项要为
false - 包名必须全网唯一
- 多次发布注意修改版本号
在NPM官网上查看
在自己的空间里就可以查看到
在另外的项目里安装引用
这个不用多说了，能发NPM包的都会用吧~
npm install [packageName]@latestnpm install [packageName]@latestnpm install [packageName]@latest
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
