Motivation
平时喜爱写一些 NPM 模块，写得多了，整顿出一套工作流，解放一些反复的搭建工作。
如果你喜爱，请间接拿去用，也能够参照该项目标一些 Feature ，给你一些提醒与帮忙。
Feature
- 反对 Typescript
- 反对单元测试，与测试覆盖率
- 疾速生成文档站点
- 接入 Circle CLI，构建、发包、文档站点一条龙服务
- 标准 ESLint + Prettier
- 疾速生成 Change Log
- 生成同时反对 CommonJS 和 ES Module 的 NPM 包
Download
git clone git@github.com:JerryC8080/module-seed.gitUsage
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.json2. Npm Script
| Script | Description |
|---|---|
| build | 构建代码，生成 ./build 文件夹 |
| fix | 疾速格式化代码 |
| test | 构建单元测试 |
| watch:build | 动静构建代码，用于开发模式 |
| watch:test | 动静构建单元测试，用于开发模式 |
| cov | 构建单元测试覆盖率，生成 ./coverage 文件夹 |
| doc | 构建文档站点，生成 ./docs 文件夹 |
| doc:publish | 公布文档站点到 github pages |
| version | 强制以 patch 模式更新 version，如：v0.0.1 → v0.0.2 |
3. Coverage
通过运行 npm run cov，命令会构建单元测试，并且输入网页版本的测试报告：
open coverage/index.html4. Docs
通过运行 npm run doc，会构建 TS API 文档，并且输入网页版本：
open docs/index.html5. 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 docnpm 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...