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

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

先上图片

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

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

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

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

三、package.json 配置

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

package.json 文件配置参考文档

• 官方文档 Creating a package.json file
• npm 新的包名规范
• npm 包结构
• npm 包描述文件与 NPM
• npm 版本号规范

四、webpack 配置

webpack 帮我们做的事

• 打包 js 文件
• es6 的支持

如何配置

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

webpack 配置参考文档

• webpack 官方中文指南
• babel 配置 ps: 之后会写一篇关于 webpack 配置的，再补充进来

五、编写深拷贝方法

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

六、添加单元测试

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

怎么单元测试

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

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

参考文档

• mocha 官方教程
• 阮一峰 测试框架 Mocha 实例教程
• chai 官网
• nyc 教程 我参考 npm 包的 readme

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

七、 使用git cz, 规范Commit message

参考文档：

• commitizen 使用官方文档
• 阮一峰 Commit message 和 Change log 编写指南

八、eslit 和 prettier 配置

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

参考文档:

• eslint 官方文档
• prettier 官方文档
• 使用 husky, prettier, eslint 在代码提交时自动格式化，并检查代码

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

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

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

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

• travis-ci 官方文档

• javascript width nodejs .travis.yml 配置教程

• 阮一峰 持续集成服务 Travis CI 教程

• codecov

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

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

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

• 在codecov用 github 账号登录

• 添加新项目

• 选择一个项目

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

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

• 在.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" // 上传测试报告
    

参考文档

• codecov 官方文档
• codecov js node 环境 example

十、github 徽章设置

• 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