一个基于 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/