当前位置：文江博客文章教程详情

搭建 React + TS 开发环境 Webpack 5.x、Babel 7.x、React 17.x、TS 4.x

发布于 2022-10-04 10:51:27 字数 10791 浏览 178 评论 0

基础设施

git init

初始化 git 仓库

.gitignore

添加 .gitignore 文件，推荐使用 vscode 插件 gitignore 进行配置，常用配置项（Node, VisualStudioCode, JetBrains, Windows, Linux, macOS）

.nvmrc

node --version > ./.nvmrc 生成 .nvmrc 文件。

nvm (node version manager) 是 node 的版本管理工具，.nvmrc 是 nvm 的配置文件，很多工具在判断项目的 node 版本的时候会读取这个配置，例如 travis CI。

.npmrc

.npmrc 是给 npm 用的配置文件，当然你如果使用 yarn，yarn 也会遵守 .npmrc 配置，虽然 yarn 有专门的配置文件 .yarnrc

如果用 yarn npm 装依赖一定要用代理，并且也没有设置淘宝源，可以在 .npmrc 中配置这些的依赖过淘宝源，如 node-sass:

# .npmrc
SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass

建议还是使用 nrm 设置一下淘宝源

LICENSE

在 choose a license 中选择一份协议，复制粘贴到 LICENSE.txt 中，改一改配置如年份、作者名就行

npm init

npm/yarn init -y 初始化 package.json

然后可以看情况改造下，如:

{
  "name": "react-ts-build-from-scratch",
  "version": "1.0.0",
  "description": "build from scratch",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": {
    "name": "Sadhu",
    "url": "https://github.com/YxrSadhu",
    "email": "xxx@xxx.com"
  },
  "license": "ISC"
}

.vscode

.vscode/settings.json 是 VSCODE 的项目配置文件，可以做如下常规配置：

{
  // 默认 ESLint 并不能识别 .vue、.ts 或 .tsx 文件
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  // 保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  // stylelint 扩展自身的校验就够了
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 使用本地安装的 TypeScript 替代 VSCode 内置的来提供智能提示
  "typescript.tsdk": "./node_modules/typescript/lib",
  // 指定哪些文件不参与搜索
  "search.exclude": {
    "**/node_modules": true,
    "dist": true,
    "yarn.lock": true
  },
  // 指定哪些文件不被 VSCode 监听，预防启动 VSCode 时扫描的文件太多，导致 CPU 占用过高
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true,
    "**/dist/**": true
  },
  "files.eol": "\n",
  "editor.tabSize": 2,
  "prettier.requireConfig": true,
  "cSpell.words": [
    "corejs",
    "pmmmwh",
    "stylelint",
    "webpackbar"
  ],
  // 保存文件时自动用 prettier 格式化
  "editor.formatOnSave": true,
  // 配置 VScode 使用 prettier 的 formatter
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

CI 工具如 .travis.yml

各自工具各自实践

README.md

有些图标可以在 shields.io 选

commit

# 添加远程仓库地址
git remote add github git@github.com:xxx
# 添加所有修改到暂存区
git add -A
git commit -m "feat: xxxx"
# 推送到 github，关联 github 远程仓库和 master 分支，下次还是 master 分支就可以直接 git push 了
git push github -u master

commit 规范可以参考阿里技术，也可以使用 commitizen来生成 commit。

若想 emoji 可以使用 gitmoji-cli 或者直接使用 VSCode 扩展 Gitmoji Commit 生成 git emoji。

也可以设置 git 钩子来做一些事情: husky + commitlint

linter & formatter

代码风格交给 Prettier
语法检查交给 ESLint

ESLint

根据项目技术栈，推荐 AlloyTeam 的配置规则，具体配置参考团队 github

当然你要用 airbnb 规则找不痛快也可以:)

自动修复 ESLint 错误 npm run eslint:fix

也可以下个 ESLint 插件，提供 IDE 检测及修复。

Prettier

yarn add prettier -D

然后 VSCODE 下 Prettier 插件，提供 IDE 检测及修复。

推荐配置：

// .prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化嵌入的内容
  embeddedLanguageFormatting: 'auto',
};

stylelint

如果需要 css/scss/less linter 的话，可以用这个

yarn add -D stylelint stylelint-config-prettier stylelint-config-rational-order stylelint-config-standard stylelint-declaration-block-no-ignored-properties stylelint-order stylelint-scss

配置可以参考:

// .stylelintrc.json
{
  "extends": ["stylelint-config-standard", "stylelint-config-rational-order", "stylelint-config-prettier"],
  "plugins": [
    "stylelint-order",
    "stylelint-declaration-block-no-ignored-properties",
    "stylelint-scss",
    "stylelint-config-prettier" // 解决和 prettier 的冲突
  ],
  "rules": {
    "comment-empty-line-before": null,
    "declaration-empty-line-before": null,
    "function-name-case": "lower",
    "no-descending-specificity": null,
    "no-invalid-double-slash-comments": null
  },
  // 加 "**/typings/**/*" 的原因：https://github.com/stylelint/vscode-stylelint/issues/72
  "ignoreFiles": ["node_modules/**/*", "src/assets/**/*", "dist/**/*", "**/typings/**/*"]
}

可以安装 stylelint 插件，提供 IDE 检测及修复。

构建

Webpack 5 作为构建工具。（TODO: 尝试下 vite）

安装

yarn add -D webpack webpack-cli

基础配置

webpack basic config 参见该 commit
配置参数的意义都在注释中。

引入 Babel 在 webpack 打包过程中转译 tsx? | js 文件

参见该 commit
同样，注意点都在注释中。

引入 TS、React

yarn add react react-dom
yarn add -D typescript
yarn add -D @babel/preset-typescript @types/react @types/react-dom

babel 增加对 ts、react 的转译预设:

// .babelrc.js
"presets": [
    "@babel/env", // 把 useBuiltIns 等删了，因为和 @babel/runtime-corejs3 功能重复了
  + "@babel/preset-react",
  + "@babel/preset-typescript"
],

我采用的 tsconfig 配置，更多可参考官网，有些选项对 tsc 有效，有些选项对 IDE 增益:

{
  "compilerOptions": {
    "target": "ES3" /* 指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "esnext" /* 指定要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "isolatedModules": true, // 会在 babel 编译代码时提供一些额外的检查
    "noImplicitAny": false /* 是否默认禁用 any */,
    "removeComments": true /* 是否移除注释 */,
    "declaration": true /* 是否自动创建类型声明文件 */,
    "strict": true /* 启动所有类型检查 */,
    "allowJs": true,
    "checkJs": false,
    "noEmit": false /* tsc 编译的时候不生成代码 */,
    "jsx": "react" /* 指定jsx代码用于的开发环境, react -> 从 tsx 编译到 js, preserve -> 从 tsx 编译到 jsx */,
    "importHelpers": true /* 引入tslib里的辅助工具函数*/,
    "moduleResolution": "node" /* 选择模块解析策略，有'node'和'classic'两种类型 */,
    "experimentalDecorators": true /* 启用实验性的装饰器特性 */,
    "esModuleInterop": true /* 通过为导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性, 适用于 Babel 编译 */,
    "allowSyntheticDefaultImports": true /* 允许从没有默认导出的模块中默认导入 */,
    "sourceMap": true /* 是否生成map文件 */,
    // 这里的 baseUrl 其实跟 ts 模块引入有很大关联的'，
    // tsconfig.json 路径为根路径
    "baseUrl": "./",
    "paths": {
      // 路径映射，与 baseUrl 关联
      "Src/*": ["src/*"],
      "Components/*": ["src/components/*"],
      "Utils/*": ["src/utils/*"]
    },
    "outDir": "dist-ts"
  },
  "include": ["src"]
}

增加 webpack extensions 与别名的配置:

// webpack.common.js
resolve: {
    // 配置 extensions，在 import 的时候就可以不加文件后缀名了。
    // webpack 会按照定义的后缀名的顺序依次处理文件，比如上文配置 ['.tsx', '.ts', '.js', '.json'] ，webpack 会先尝试加上 .tsx 后缀，看找得到文件不，如果找不到就依次尝试进行查找，
    // 所以我们在配置时尽量把最常用到的后缀放到最前面，可以缩短查找时间。
    extensions: ['.tsx', '.ts', '.js', '.json'],
    alias: {
      Src: path.resolve(__dirname, '../src'),
      Components: path.resolve(__dirname, '../src/components'),
      Utils: path.resolve(__dirname, '../src/utils'),
    },
  },

因为 TS 对 css、图片资源等引入，这些配置还不支持识别，需要手动配置声明文件，可以在 types/xxx.d.ts 里声明，能够被全局识别。例子

实用配置

i. 利用 fork-ts-checker-webpack-plugin 插件，使得 Webpack 打包编译时，起一个单独的进程去并行地进行 TypeScript 的类型检查。（我觉得利用 IDE 就够了）
ii. 利用 react-refresh/babel、@pmmmwh/react-refresh-webpack-plugin 替代 react-hot-loader，性能会提升。
iii. 利用 mini-css-extract-plugin split css module
iiii. 利用 webpackbar 创建打包进度条
iiiii. 利用 webpack-bundle-analyzer 开一个 server 代理 bundle 分析页面
iiiiii. 利用 webpack.BannerPlugin 声明版权
iiiiiii. 利用 cross-env 兼容环境变量