关于github:Module-Seed-一套优雅的-Github-工作流

Motivation

平时喜爱写一些 NPM 模块，写得多了，整顿出一套工作流，解放一些反复的搭建工作。
如果你喜爱，请间接拿去用，也能够参照该项目标一些 Feature，给你一些提醒与帮忙。

Feature

1. 反对 Typescript
2. 反对单元测试，与测试覆盖率
3. 疾速生成文档站点
4. 接入 Circle CLI，构建、发包、文档站点一条龙服务
5. 标准 ESLint + Prettier
6. 疾速生成 Change Log
7. 生成同时反对 CommonJS 和 ES Module 的 NPM 包

Download

git clone git@github.com:JerryC8080/module-seed.git

Usage

1. Architecture

.
├── .circleci // CircleCI 脚本
│   ├── config.yml
├── coverage // 主动生成的测试覆盖率报告
├── docs  // 主动生成的文档
├── build  // 构建代码
│   ├── main  // 兼容 CommonJS
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   └── lib
│   └── module  // 兼容 ES Module
│       ├── index.d.ts
│       ├── index.js
│       └── lib
├── src  // 源码
│   ├── index.ts
│   └── lib
│       ├── hello-world.spec.ts // 单元测试
│       └── hello-world.ts
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── tsconfig.module.json

2. Npm Script

3. Coverage

通过运行 npm run cov，命令会构建单元测试，并且输入网页版本的测试报告：

open coverage/index.html

4. Docs

通过运行 npm run doc，会构建 TS API 文档，并且输入网页版本：

open docs/index.html

5. CircleCI Config

本项目选择 CircleCI 来实现我的项目构建、公布 NPM、公布文档站点等自动化构建工作。

1. Add Repo to CircleCI

2. Test Coverage to Coveralls

如果想领有一个这样的 Status:

须要把你的 repo 增加到 coveralls.io

而后，在 CircleCI 增加环境变量 COVERALLS_REPO_TOKEN

那么，每次 CircleCI 产生构建的时候，就会上报单元测试覆盖率到 coveralls 去。

参考 .circleci/config.yml 相干脚本:

...
upload-coveralls:
  <<: *defaults
  steps:
    - attach_workspace:
        at: ~/repo
    - run:
        name: Test Coverage
        command: npm run cov
    - run:
        name: Report for coveralls
        command: |
          npm install coveralls --save-dev
          ./node_modules/.bin/nyc report --reporter=text-lcov | ./node_modules/.bin/coveralls
    - store_artifacts:
        path: coverage
...

3. Doc Site to Github Pages

本地能够通过命令来构建和公布文档站点到 Github Pages

npm run doc
npm run doc:publish

如果这个动作交给 CircleCI 来实现，则须要为 Repo 增加一个 Read/Write 权限的 User Key

那么，每次 CircleCI 产生构建的时候，就会构建文档，并公布到 Github Pages 中去。

例如本我的项目，就能够通过以下地址拜访：

https://jerryc8080.github.io/module-seed

参考 .circleci/config.yml 相干脚本:

...
 deploy-docs:
    <<: *defaults
    steps:
      - attach_workspace:
          at: ~/repo
      - run:
          name: Avoid hosts unknown for github
          command: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
      - run:
          name: Set github email and user
          command: |
            git config --global user.email "huangjerryc@gmail.com"
            git config --global user.name "CircleCI-Robot"
      - run:
          name: Show coverage
          command: ls coverage
      - run:
          name: Show docs
          command: ls docs
      - run:
          name: Copy to docs folder
          command: |
            mkdir docs/coverage
            cp -rf coverage/* docs/coverage
      - run:
          name: Show docs
          command: ls docs
      - run:
          name: Publish to gh-pages
          command: npm run doc:publish
...

4. Coverage site

在 CircleCI 的 deploy-docs 工作中，会构建 Coverage Site，而后一起公布到 Github Pages 的 /coverage 目录中。

例如本我的项目，就能够通过以下地址拜访：

https://jerryc8080.github.io/module-seed/coverage/index.html

5. NPM Deploy

自动化脚本会以 patch 的模式降级版本号，例如：v0.0.1 → v0.0.2。
而后公布到 npmjs.com 去。

如果须要启用这一性能，须要为 CircleCI Repo 增加 npm token。

首先，获取 npm token

而后，为 CircleCI Repo 增加环境变量：npm_TOKEN

那么，每次 CircleCI 产生构建的时候，就会构建和公布 NPM 包。

参考 .circleci/config.yml 相干脚本:

...
deploy:
  <<: *defaults
  steps:
    - attach_workspace:
        at: ~/repo
    - run:
        name: Set github email and user
        command: |
          # You should change email to yours.
          git config --global user.email "huangjerryc@gmail.com"
          git config --global user.name "CircleCI-Robot"
    - run:
        name: Authenticate with registry
        command: echo "//registry.npmjs.org/:_authToken=$npm_TOKEN" > ~/repo/.npmrc
    - run:
        name: Update version as patch
        command: npm run version
    - run:
        name: Publish package
        command: npm publish
...