npm包开发建议

发表于 更新于 分类于 ， ， 本文字数： 815 阅读时长 ≈ 1 分钟

技术选型

建议根据所开发的npm包功能，选择更加快速且合理的打包方案。如果开发的是一个 tools 这样的工具库，显然更适合用 rollup 打包。如果是开发的是一个业务组件（vue），则更加适合采用 @vue/cli 的 lib 模式来构建。

为什么一定要选择打包工具来开发 npm 包?

  • 不一定非要使用构建工具来开发，使用构建工具主要是为了使用它强大的生态系统。比如代码风格检测、本地服务、同时构建多种规范的产物等等，方便我们的开发

为什么是 rollup 而不是 webpack?

  • 随着 rollup 和 webpack 的版本更新，二者之间的差异性特性越来越小
  • rollup 配置简单，支持同时打包输出多种规范的产物（iife、cjs、umd、esm、amd、system）
  • webpack 功能强大社区丰富，更加适合大型应用；不支持打包输出为es module，而且产物不是很纯净
  • 构建App应用时，webpack比较合适；如果是类库（纯js项目），rollup更加适合。

完整的开发流程

  1. 初始化项目
  2. 创建合理的目录结构
  3. 配置 eslint 统一代码风格
  4. 配置 typescript 开发环境
  5. 配置 babel
  6. 配置 git 提交的校验钩子
  7. 开始编写代码
  8. watch 模式开发(本地服务)
  9. 添加单元测试，编写测试示例
  10. 完善 package.json 必要字段
  11. 配置合适的 npm script
  12. 本地测试开发的 npm 包
  13. 发布包到 npm
  14. 提交代码到 git 仓库

合理的包结构

1
2
3
4
5
6
7
8
9
10
├── bin  // 用于存放可执行二进制文件的目录
├── dist(lib)  // 产物输出目录
├── docs // 文档说明
├── examples // 示例
├── package.json
├── README.md // 包说明，会在npm展示
├── scripts // 脚本
├── src(packages) // 源码
├── test // 单元测试
└── ...  // 一些配置文件（eg: eslint、babel）

致谢

本文摘抄于以下文章，在此致以诚挚谢意！

  1. 开发一个规范的 npm 包