使用typescript下的项目架构最佳实践
此贴记录下在 typescript
项目里的一些相关配置和包的选用,其中各种依赖包和最佳实践都在不断发展演变中,最新的配置以该仓库 MVVM 为准。
typescript 支持
在webpack
中使用 babel 7.0 +
,摒弃了传统的 ts-loader
或 awesome-typescript-loader
方案。原因如下:
- 参考 1
- 参考 2
1 | yarn add @babel/core babel-loader @babel/preset-env @babel/preset-typescript -D |
babel
只负责转换,并不会做对应的类型检查,所以需要安装 fork-ts-checker-webpack-plugin 来进行报错提示:
1 | yarn add fork-ts-checker-webpack-plugin -D |
项目通用转 ES5
安装包:
1 | yarn add @babel/plugin-transform-runtime @babel/runtime-corejs3 -D |
babel.config.js
:
1 | module.exports = { |
tsconfig.json
配置:
1 | { |
webpack
配置:
1 | module: { |
代码检查 & 风格统一
代码检查使用 eslint
(官方未来推荐),抛弃传统的 tslint
方案:参考链接。
1 | yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D |
@typescript-eslint/parser
作为 babel
的解析器,这时候就不需要安装 babel
默认推荐的 eslint
解析器(babel-eslint
)了,规则列表查阅。
风格统一使用 prettier
,在 typescript
项目里将配置文件 prettier.config.js
里添加 parser: "typescript"
即可(前提是已安装 @typescript-eslint/parser
:参考链接)。
项目通用 prettier
的其他包:
1 | yarn add prettier eslint-config-prettier eslint-plugin-prettier -D |
结合 eslint+prettier
,得到:
prettier.config.js
:
1 | module.exports = { |
.eslintrc.js
(这里使用的 google
默认规则 eslint-config-google
):
1 | module.exports = { |
单元测试
jest
这里选用 jest
框架来测试。jest 的优势?。
在 ts
项目里,摒弃了传统的 ts-jest
,只需如上安装 @babel/preset-typescript
,并在 babel.config.js
里的 presets
添加即可。参考链接。
1 | yarn jest @types/jest -D //@types/jest 是 jest 的 ts 类型定义文件,而 vscode 便是基于 ts 进行代码提示的 |
- 经查
jest
依赖包里发现,jest
依赖babel-jest
(用于支持es6
语法),故不需要在单独引入依赖包babel-jest
。 - 因为引入了
@types/jest
,也就不需要引入eslint-plugin-jest
来消除jest
变量的报错。 jest config
采用默认配置即可,更多个性化配置参见。
coveralls
这里选用了 coveralls 作为自动测试代码覆盖率的在线工具。由于项目走 travis.com
的持续集成,所以配置为:
1 | yarn add coveralls -D |
.coveralls.yml
:
1 | service_name: travis-pro |
package.json
添加 scripts
(测试框架为 jest
,更多方法查阅):
1 | "scripts": { |
.travis.yml
添加:
1 | script: |
在 vscode 里调试 jest/webpack 等 node.js
调试
-> 添加配置
-> 选择node.js
,自动生成.vscode/launch.json
,修改配置为:
文档
1 | "configurations": [ |
- 调试单一
node
文件:launch.json
配置:program:${workspaceFolder}/index.js
args:['--dev']
- 调试
npm scripts
(包括普通node
命令如index.js
和非node
命令如jest,webpack
等)时:launch.json
配置:runtimeExecutable:"npm"
//必须设置为npm
runtimeArgs:["run", "debug"]
//第一个参数必须为run
runtimeVersion:"10.6.0"
//可选
package.json
的npm scripts
配置:- 必须加
--inspect-brk=5858
,5858
与port
设置须相同 - 非普通命令需要转换成
node
调用:webpack=>./node_modules/.bin/webpack
(因为npm run build
实际调用的是node_modules/.bin/webpack
) - 带参数的命令接在后面即可:
node --inspect-brk=5858 ./node_modules/.bin/jest --coverage
- 必须加
npm scripts
:
1 | "scripts": { |
前端测试概念
测试类型
- 单元测试 (
Unit Test
) - 通过模拟输入和预测输出的方式测试独立的函数或者类。 - 集成测试 (
Integration Test
) - 测试多个模块间的联动是否和期望相同。 E2E
测试 (也被称为Functional Test
) - 关注点不在内部实现方式,而是测试产品在真实使用场景(比如在浏览器)中是否可以达到预想的结果,属于黑盒测试。
更多
其他
Typescript 错误忽略
- 单行忽略
// @ts-ignore
- 忽略全文
// @ts-nocheck
- 取消忽略全文
// @ts-check
github 徽章
在 shields 上面可生成任意徽章。
.d.ts 文件是什么
d.ts
就是 TypedDefinition 类型定义文件
,用来定义类型信息以及接口规范。
ts
代码最终会编译成 .js
的 js
代码,供他人使用。这个时候类型信息就丢失了。所以 ts
编译器会自动根据 .ts
中的信息,可以自动生成对外的 .d.ts
文件,和生成的 js
文件搭配使用。其中,js
文件是给运行引擎用的,而 .d.ts
文件是给 IDE(智能编辑器)
写代码时参考用的。
如何测试本地 node 包
采用 npm link
- 在需要测试的包(如
test
)路径下执行:npm link
,这时全局node_modules
包下就可以看到这个test
包。 - 在需引用的目标包的项目下安装该测试包:
npm link test
(如果有作用域需要加上作用域:npm link @fe_korey/test
),这时 test 包就被安装在了该目录下,在test
包里的修改会同步到目标包里。 - 取消连接:在
test
包里执行:npm unlink
即可.
注意:在 webpack
项目中,如果用 npm link
方式测试本地包,需要设置 config
:
1 | resolve: { |