vite 开发 npm 包过程细节记录

前言

该文主要记录开发和发布全流程的一些经验，会省略一些开发细节，但整个流程遇到的步骤都会提到。

开发相关

1. Vite 支持 库模式, 参考 配置项，同时需要设置 package.json 中的 exports 字段。

{
  "name": "my-lib",
  "files": ["dist"], // npm包作为依赖安装时要包括的文件
  "main": "./dist/my-lib.umd.js", // umd 模式入口文件
  "module": "./dist/my-lib.es.js", // es module 模式入口文件
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  }
}

files 字段详细解释： link

ps: 这里需要把样式文件路径也配置一下

"./dist/style.css": "./dist/style.css"

2. 把一些项目通常都会用到的通用依赖放到 peerDependencies 中安装, 例如 react 和 react-dom
3. 本地调试 npm 包，build 完然后 npm link [package-name], 就可以在项目中像正常 npm 包一样引入。解绑： npm unlink [package-name]
4. vite 本身不会帮助生产类型文件，使用 vite-plugin-dts 插件，并在 package.json 中添加 types 字段，指定类型入口文件。

{
  "types": "./dist/index.d.ts"
}

ps: vite-plugin-dts 默认生成的类型文件会用 src 目录包裹起来，想要生成的位置在 dist 文件夹同级，可做以下配置：

dts({
  beforeWriteFile: (filePath, content) => ({
    filePath: filePath.replace(/src/, ''),
    content
  })
})

单测相关

一个合格的 npm 包必须有相应的单测用例，这能保证包的可靠性。

单测思路

学习单元测试，结合 ARRANGE-ACT-ASSERT 这个思路，根据官方文档掌握对应每一步要用的 api，按照用户的角度去写单元测试就很简单了，通常就是以下三步：

• Arrange：元素定位结合 render，jest-dom——getby/queryby/findby...，jest.mock()...等等
• Act：userEvent，waitFor，async...await...等等
• Assert: 结合jest-dom-toBeInTheDocument，toBeChecked等等

用 Vitest 测试

用 vitest 测试过程中，获取元素时遇到的坑，应该按照 优先级 来，不要图方便，只用 getByTestId

润色

添加示例

新建 example 文件夹，里面正常编写 app 应用。修改 index.html 入口为 /example/index.tsx，需要装回 @vitejs/plugin-react，react, react-dom，以便能正常运行 react app(example 示例代码)。

编写 README.md

从上到下应该包含，一些勋章（制作工具）、Install、Usage、Option章节。

CI/CD

可以利用 Github Action 库来实现，每次提交都会自动更新 github release 和 npm package。

结语

以上就是全流程一些杂碎但不容忽视的细节，记录下来方便自己查看，如果能帮到你就更好啦。附上自己开发的 antd-tag-input 包。