阅读 302

发布一个放心使用并且可维护的npm包(以发布一个深拷贝方法为例)

Build Status
codecov
npm package
NPM downloads

发布一个让用户放心使用并且可维护的npm包(以发布一个深拷贝包为例)

先上图片

https://github.com/zwfun

一、怎样才是一个放心使用并且可维护的 npm 包

  • 发布的包能构建成功
  • 发布的包经过测试用例测试并且测试用例覆盖率达到一定程度(只有经过测试用户才能放心使用)
  • 发布的包是符合代码规范, 提交规范(能让参与项目维护的用户使用同一套代码规范)

二、以发布一个深拷贝包为例,编写并且发布 npm 流程

  • 设置 package.json 文件
  • webpack 配置
  • 配置 eslint、prettier
  • 编写深拷贝方法
  • 编写单元测试/运行测试/测试报告
  • 使用git cz, 让提交的代码更规范
  • 提交前格式化代码
  • 放到 github 上
  • 自动构建和自动化测试
  • 项目徽章设置
  • 发布包

三、package.json 配置

npm init 创建 package.json 文件,我的 package.json 文件配置

package.json 文件配置参考文档

四、webpack 配置

webpack 帮我们做的事

  • 打包 js 文件
  • es6 的支持

如何配置

  • 配置文件入口和出口
  • 配置.babelrc 支持 es6

webpack 配置参考文档

五、编写深拷贝方法

实现深拷贝数组和对象。函数和Date类型不做深拷贝。
复制代码

六、添加单元测试

为什么要单元测试 只有通过单元测试并有一定的测试覆盖率,用户才能放心使用你发布的包

怎么单元测试

  • 使用 mocha 做单元测试
  • 使用 chai 的 expect 做断言库(还有很多种选择 用 nodeJS 原生的 assert 库也行)
  • 使用 nyc 生成测试覆盖率(istanbul 也可以)
  • 编写测试用例

安装的包: npm i chai mocha nyc -D

参考文档

ps: 在测试文件中使用 import 需要引入@babel/register 包(改写 require 命令,为它加上一个钩子。此后,每当使用 require 加载.js、.jsx、.es 和.es6 后缀名的文件,就会先用 Babel 进行转码), 使用如下命令: nyc mocha --require @babel/register -R spec test

七、 使用git cz, 规范Commit message

参考文档:

八、eslit 和 prettier 配置

使用 husky 和 lint-staged 配合 eslit 和 prettier 在提交代码的时候格式化代码,使得提交的代码能够统一规范

参考文档:

九、CI/CD 持续集成服务、自动构建和自动化测试

  • travis-ci Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。

持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。

持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。

改善您的代码审查工作流程和质量。 Codecov 提供高度集成的工具来分组,合并,存档和比较覆盖率报告

网上的教程比较少 自己写个

  • 在 github 导航栏的 Marketplace 中添加 Codecov

    https://github.com/zwfun

  • codecov用 github 账号登录

    https://github.com/zwfun

  • 添加新项目

    https://github.com/zwfun

  • 选择一个项目

    https://github.com/zwfun

  • 复制 token, 放在.travis.yml 文件中

      // 这个token用来上传测试报告到对应的项目的
      env: - CODECOV_TOKEN="6a3d8b1b-fe8e-44cb-8b6d-6af0d9344adc" 
      

    https://github.com/zwfun

  • 在.travis.yml 文件中添加如下命令
          install:
          - npm install //安装依赖包
          - sudo pip install codecov // 安装codecov包
          script:
          - npm test // 执行测试用例
          - npm run report-coverage //生成测试报告
      
  • 在 package.json 文件中添加
          "test": "nyc mocha --require @babel/register -R spec test", // 执行测试用例
          "report-coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov" // 上传测试报告
      

参考文档

十、github 徽章设置

十一、发布包

  • npm login
  • 填写用户名和密码邮箱
  • npm publish
  • npm 报错了,原因是跟已发布的包重名了, 修改了 package.json 中的 name,改成 zwclonedeep(You do not have permission to publish "clonedeep". Are you logged in as the correct user?)
  • 发布成功+ zwclonedeep@1.0.0