通过Vite来发布自己的第一个npm包(手把手版)

前言

我们在前端开发中经常会安装一些npm包，当你在前端开发有一段时间之后你也会知道，那些npm包实际上就是别人写好的一些代码来供你调用，那么今天就来讲讲如何通过Vite + TS 来发布一个属于自己的npm包

使用Vite建立项目

安装Vite

在你想要建立的项目的文件下使用

Bash npm create vite [project-name]

→ vanilla

→ TypeScript

到这里项目就建立好了，进入项目之后输入

```Bash npm install

可有可无

git init ```

项目结构

在自动生成的项目中，可以根据自己的需求删除一些无用文件。

实际上一个npm包最重要的东西就是package.json这个文件

\| 💡 一个 NPM 模块 只 需要包含一个带有 name 和 version 属性的 package.json 文件。

当然package.json这个文件是最重要的，我们按照流程放到后面来讲！

写一些简单的方法作为内容

比如在utils.ts文件中写一个类型判断函数

TypeScript /** * 判断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中导出

```TypeScript import { getType } from "./utils"

export { getType }

//或者直接

export { getType } from "./utils" ```

好的，到这里的时候你已经有了一个npm包了，但是没有发到平台上。

为TS文件生成类型文件

如果你是使用的JS，那么可以直接跳过这步，如果你使用的是TS那你一定要看下去，不要再傻傻的手写了！

首先配置vite.config.ts

首先需要在vite.config.ts中进行一些基础的build所需配置

TypeScript 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来自动的生成类型文件

TypeScript // 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文件夹下 JSON // package.json "scripts": { "dev": "vite", "build": "vite build && tsc -p tsconfig.build.json", // 修改成这样 "preview": "vite preview" }, 完成后运行命令npm run build

package.json 配置

script和依赖的配置大家都知道是什么，就不在这边阐述了。 JSON { "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 账号。

1. 检查npm并切换回npm源

   我是用的nrm管理的使用 nrm use npm

   如果是没有用源管理的话就直接 npm config set registry https:*//registry.npmjs.org/*

2. 登录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/>.
   ```

3. 运行发布命令 Bash // 发布！ npm publish 注意点：

• 私有选项要为false
• 包名必须全网唯一
• 多次发布注意修改版本号

在NPM官网上查看

在自己的空间里就可以查看到

在另外的项目里安装引用

这个不用多说了，能发NPM包的都会用吧\~ Bash npm install [packageName]@latest