React, Webpack, React HMR(Hot Module Reload), Typescript, Typescript Eslint, Prettier, And further TSJest

具体参考该项目

ts-boilerplate

List

  • .vscode 项目配置
  • js 文件编译
  • Lint 与 Prettier 格式化
  • 样式相关
  • 测试相关

.vscode 项目配置

  1. {
  2.   "eslint.validate": [
  3.     {
  4.       "language": "typescript",
  5.       "autoFix": true
  6.     },
  7.     {
  8.       "language": "typescriptreact",
  9.       "autoFix": true
  10.     }
  11.   ],
  12.   "editor.formatOnSave": true
  13. }

js 文件编译

  1.      (ts-loader)          (babel)
  • ts code -> es6code -> target es5

不考虑 prettier 格式化、lint 检查，流程就是先经过 ts-loader 把原 ts 代码转成 es6，再有 babel 将 es6 转成 es5

Lint 与 Prettier 格式化

Lint 不用多讲吧，tslint 官方宣布放弃，转移到 typescript-eslint

用到下列包：

  • “@typescript-eslint/eslint-plugin”: “^2.3.0”
  • “@typescript-eslint/parser”: “^2.3.0”
  • “eslint”: “^6.4.0”
  • “eslint-plugin-react”: “^7.14.3”

考虑了下，还是需要 Prettier，统一格式化，告别强迫症

配置时候有个坑，.pretterrc.js 新创建后，需要重启 VSCode 才生效

用到 3 个 dev 包：

  • “eslint-config-prettier”: “^6.3.0”
  • “eslint-plugin-prettier”: “^3.1.1”
  • “prettier”: “^1.18.2”

参考文章：

样式相关

整体结构以及一些通用组件样式，之后整理补充

测试相关

折腾了许久，只能说，8 会，NMD，以后再加上

疑问的地方：

jest 或 ts-jest 需要相应 babel、tsconfig 配置，

后者不晓得有没有或者为什么没有生效

前者好像生效，但是设置 { node: ‘current’ }, 以及 @babel/preset-typescript，测试通过了，但又和 webpack 配置冲突，搜来搜去没找到独立配置的方式，无法指定 babelrc