一个基于 typescript
+ rollup
+ karma
+ mocha
的库开发脚手架。
node>=10.13.0
-lint-staged v10
对node
版本的要求。git>=2.13.0
-husky v4
对git
版本的要求。
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
选项
是一个可以在真实浏览器中运行的测试框架。
断言库,既支持 Expect/Should
BDD
式的断言风格,也支持 Assert
TDD
式的断言风格。
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
模块。
用于在 Node
环境中直接执行 ts
文件。在执行 karma start
命令时自动加载并执行 karma.conf.ts
文件。
方便自定义 git hook
,主要用于在 git commit
和 git push
之前进行一些代码检查之类的操作。
通过命令行交互的形式规范 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。
只对 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
文件作为配置文件进行解析,因此会报错。- 可以参考使用 js config file。
- 将
karma start
命令添加到pre-commit hook
中:"pre-commit": "karma start ... && lint-staged"。
js
代码检查工具。配置文件为 .eslintrc.yml
。详情参见:Configuring ESLint。
使用
eslint --init
命令按照步骤初始化生成.eslintrc.yml
文件即可。
配合 lint-staged
,在 .lintstagedrc.yml
中配置对应的匹配模式。
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 属性书写顺序规则配置插件。
代码风格格式化插件,配置文件为 .prettierrc.yml
。详细配置参见:prettier。
配合 lint-staged
,在 .lintstagedrc.yml
中配置对应的匹配模式。
持续集成工具,针对开源项目免费,登录官网:https://travis-ci.com/ 注册账号(不要再去 https://travis-ci.org 进行注册了),或直接使用 github
账号授权登录。
配置文件为 .travis.yml
。详情参考:Travis CI Tutorial。配置成功后便可以添加自己的 徽标。
注意避免泄露自己的隐私数据:Best Practices in Securing Your Data。
统计测试覆盖率,针对开源项目免费,登录官网:https://www.codecov.io/ 注册账号,或直接使用 github
账号授权登录。将测试覆盖率报告上传到 codecov
平台后便可以添加自己的 徽标。
配合 travis ci
自动上传测试覆盖率报告,.travis.yml
配置:
after_success:
- bash <(curl -s https://codecov.io/bash) -s ./coverage/