Skip to content

Latest commit

 

History

History
191 lines (120 loc) · 10.4 KB

README.md

File metadata and controls

191 lines (120 loc) · 10.4 KB
Raw

lib-starter

Build Status Coverage Status

typescript rollup karma mocha

eslint husky lint-staged prettier commitizen

一个基于 typescript + rollup + karma + mocha 的库开发脚手架。

Env

  • node>=10.13.0 - lint-staged v10 对 node 版本的要求。
  • git>=2.13.0 - husky v4 对 git 版本的要求。

rollup

rollup 打包工具。

  • @rollup/plugin-node-resolve - typescript 插件，使用 node module 的解析算法，当使用 node_modules 中的第三方模块时需要该插件。

  • @rollup/plugin-commonjs - typescript 插件，用于将 CommonJS 模块转换成 ES6 模块。参考：How do I use Rollup in Node.js with CommonJS modules?

  • @rollup/plugin-typescript - typescript 插件，用于将 ts 文件编译成 js 文件，以便 rollup 进行后续处理。

  • rollup-plugin-terser - typescript 插件，用于压缩文件。既可以压缩 es5 文件，也可以压缩 es6 文件。

  • rollup-plugin-postcss - typescript 插件，用于处理 CSS 文件。配置参考：rollup-plugin-postcss Options。

    使用 options.modules 选项实现自定义配置的时候，注意需要关闭 options.autoModules 选项

mocha

是一个可以在真实浏览器中运行的测试框架。

chai

断言库，既支持 Expect/Should BDD 式的断言风格，也支持 Assert TDD 式的断言风格。

karma

karma 是一个 test runner。

  • karma-mocha - karma 适配器插件，用于适配 mocha 测试框架。需要在 karma.conf.ts 中配置 client.mocha 选项进行相关配置。
  • karma-mocha-reporter - karma 测试报告插件，用于在控制台中生成 mocha 风格的测试报告。需要在 karma.conf.js 中配置 mochaReporter 选项进行相关配置。
  • karma-chai - karma 适配器插件，用于适配 chai 断言库。可以在测试用例中直接使用 chai.expect 和 chai.assert 以及 should 断言，而不需要在每个测试文件中单独 import 引入。
  • karma-typescript - karma 预处理器插件，用于将 ts 转换成 js 。需要在 karma.conf.ts 中配置 karmaTypescriptConfig 选项进行相关配置。
  • karma-chrome-launcher - karma 浏览器插件，用于启动本地的 chrome 浏览器或者 ChromeHeadless 浏览器执行测试用例。

注意：karma.conf.ts 文件需要使用 export = 导出 function 配置。因为 karma cli 只能导入 CommonJS 模块。

ts-node

用于在 Node 环境中直接执行 ts 文件。在执行 karma start 命令时自动加载并执行 karma.conf.ts 文件。

husky

方便自定义 git hook，主要用于在 git commit 和 git push 之前进行一些代码检查之类的操作。

commitizen

通过命令行交互的形式规范 commit message 的提交格式，详见：commitizen。

  • 通过 npm script 提交， package.json 配置：

    "scripts": {
  "cm": "cz"
}

    运行 npm run cm 提交。参考：Optional: Install and run Commitizen locally。

  • 和 husky 配合使用，package.json 配置：

    "husky": {
  "hooks": {
    "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
  }
}

    直接运行 git commit 提交，交互完成后会展示出最终提交信息的格式，然后在命令行中输入 :wq 完成本次提交。

    注意：在 window 平台直接使用 git commit 命令可能会出现问题，参考 How to husky prepare-commit-msg on windows? 其中 cmd 输出混乱的问题。可通过配置 npm script 来提交。

  • conventional-changelog-cli - 用于根据 commitizen 信息生成 changelog 文档，详见：conventional-changelog-cli。

  • @commitlint/cli - 用于校验提交的数据是否符合 commitizen。配合 husky 使用：

    "husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

  • @commitlint/config-conventional - commitizen 的校验规则配置。配置文件为 .commitlintrc.yml，规则参考：rules。

lint-staged

只对 git 暂存区（本次要提交）的内容进行相关检查，例如：prettier, eslint, stylelint 等等。

配置文件为 .lintstagedrc.yml。详情参见：lint-staged。

常见问题：

  • 某些命令不能直接添加到 lint-staged 中，例如 karma start：

    # .lintstagedrc.yml
'*.ts':
  # 这里 karma start 命名执行时会报错
  - karma start --single-run --browsers ChromeHeadless
  - prettier --write

    上面命令执行到 karma start ... 时会报错，因为 lint-staged 命令会把匹配到的文件作为参数传递给 karma start ... 命令，这时会错把 ts 文件作为配置文件进行解析，因此会报错。

    1. 可以参考使用 js config file。
    2. 将 karma start 命令添加到 pre-commit hook 中："pre-commit": "karma start ... && lint-staged"。

eslint

js 代码检查工具。配置文件为 .eslintrc.yml。详情参见：Configuring ESLint。

使用 eslint --init 命令按照步骤初始化生成 .eslintrc.yml 文件即可。

配合 lint-staged，在 .lintstagedrc.yml 中配置对应的匹配模式。

stylelint

css 代码检查工具。配置文件为 .stylelintrc.yml。详情参见：Get started 和 Configure。

配合 lint-staged，在 .lintstagedrc.yml 中配置对应的匹配模式。

rules

校验规则配置，已经支持超过 170 种规则配置。

注意：所有规则默认都不是开启的，并且没有默认值。必须通过配置明确的开启规则。

可以自定义规则配置，也可以 extend 第三方配置，在此基础上再自定义部分规则。

  • stylelint-config-recommended - 推荐配置，只开启了可能是错误写法的规则校验。
  • stylelint-config-standard - 标准配置，在推荐配置的基础上开启了 60 种 stylistic rules。

plugins

常用插件：

  • stylelint-order - css 属性书写顺序规则配置插件。

prettier

代码风格格式化插件，配置文件为 .prettierrc.yml。详细配置参见：prettier。

配合 lint-staged，在 .lintstagedrc.yml 中配置对应的匹配模式。

travis-ci

持续集成工具，针对开源项目免费，登录官网：https://travis-ci.com/ 注册账号（不要再去 https://travis-ci.org 进行注册了），或直接使用 github 账号授权登录。

配置文件为 .travis.yml。详情参考：Travis CI Tutorial。配置成功后便可以添加自己的 Build Status 徽标。

注意避免泄露自己的隐私数据：Best Practices in Securing Your Data。

codecov

统计测试覆盖率，针对开源项目免费，登录官网：https://www.codecov.io/ 注册账号，或直接使用 github 账号授权登录。将测试覆盖率报告上传到 codecov 平台后便可以添加自己的 codecov 徽标。

配合 travis ci 自动上传测试覆盖率报告，.travis.yml 配置：

after_success:
  - bash <(curl -s https://codecov.io/bash) -s ./coverage/