nuǝɯ pǝɥsᴉꞁod mǝu

    zwclonedeep

    2.0.1 • Public • Published

    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

    Install

    npm i zwclonedeep

    DownloadsWeekly Downloads

    3

    Version

    2.0.1

    License

    ISC

    Unpacked Size

    1.28 MB

    Total Files

    18

    Last publish

    Collaborators

    • aw_fun