react + ts 项目模板搭建

react + ts 模板

npm init(yarn init)

yarn init -y

安装 webpack（4.x）

yarn add webpack webpack-cli webpack-merge webpack-dev-server --dev

安装 html-webpack-plugin

yarn add html-webpack-plugin --dev

配置 html-webpack-plugin

new HtmlWebpackPlugin({
  template: 'public/index.html',
  inject: true,
  minify: {
    collapseWhitespace: true,
    collapseBooleanAttributes: true,
    collapseInlineTagWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    minifyCSS: true,
    minifyJS: true,
    minifyURLs: true,
    useShortDoctype: true,
  },
})

inject: 资源注入位置配置（true、body 会注入在body尾部）
minify：html-minifier-terser

安装 clean-webpack-plugin

yarn add clean-webpack-plugin --dev

配置 optimization

webpack3版本是通过配置CommonsChunkPlugin插件来抽离公共的模块。webpack4版本，官方废弃了CommonsChunkPlugin，而是改用配置optimization.splitChunks的方式，更加方便。

usedExports：清除无用代码，去除未使用的导出内容
runtimeChunk：把runtime部分的代码抽离出来单独打包
splitChunks：优化设置
webpack 4 Code Splitting 的 splitChunks配置探索
- chunks：表示从哪些chunks里面抽取代码（all、async、initial）
- minSize：表示抽取出来的文件在压缩前的最小大小，默认为 30000；
- maxSize：表示抽取出来的文件在压缩前的最大大小，默认为 0，表示不限制最大大小；
- minChunks：表示被引用次数，默认为1；
- automaticNameDelimiter：命名的分割符，默认为 ~；
- name：抽取出来文件的名字，默认为 true，表示自动生成文件名；
- cacheGroups：缓存组
minimize：告知 webpack 使用 TerserPlugin 或其它在 optimization.minimizer 定义的插件压缩 bundle。（production 默认为true）

minimizer：压缩工具

TerserPlugin：压缩js
```
yarn add terser-webpack-plugin --dev
```

OptimizeCSSAssetsPlugin：压缩css

yarn add optimize-css-assets-webpack-plugin --dev

配置 loader

yarn add style-loader css-loader less less-loader file-loader url-loader --dev

MiniCssExtractPlugin：打包单独的css文件

yarn add mini-css-extract-plugin --dev

yarn add postcss postcss-loader autoprefixer postcss-flexbugs-fixes postcss-normalize postcss-preset-env postcss-safe-parser --dev

在根目录新建postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ],
}

其他插件

ManifestPlugin：用于生成资产清单
WebpackBar：用于优化进度条
FriendlyErrorsPlugin：优化error信息
CopyPlugin：静态文件拷贝
CaseSensitivePathsPlugin：路径有误相关
CompressionPlugin：代码压缩
BundleAnalyzerPlugin、SizePlugin、SpeedMeasurePlugin：项目的打包分析相关

安装 react

yarn add react react-dom

使用babel 7

yarn add babel-loader @babel/preset-react @babel/preset-env @babel/core core-js --dev

babel-loader：使用Babel和webpack来转译JavaScript文件。
@babel/preset-react：转译react的JSX
@babel/preset-env：转译ES2015+的语法
@babel/core：babel的核心模块
core-js（v3）: 这里充当垫片作用（不用 @babel/polyfill 是因为内置的是 core-js@2，不会有新特性）

配置 .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        // 给文件自动添加polyfill
        "useBuiltIns": "usage",
        // 配合 useBuiltIns: usage 使用
        "corejs": 3,
        "modules": "auto",
      }
    ],
    "@babel/preset-react"
  ]
}

其他 babel 插件

@babel/plugin-syntax-dynamic-import：babel语法动态导入，实现懒加载（import() 返回的是一个 promise）
@babel/plugin-proposal-optional-chaining：可选链。(语法：obj?.foo，参照文档)，
@babel/plugin-proposal-class-properties：类属性相关的转换
@babel/plugin-transform-runtime：避免编译重复代码
@babel/plugin-proposal-decorators：装饰器
babel-plugin-import：antd 提供的引入组件插件
react-hot-loader/babel：热更新插件
@babel/plugin-transform-react-constant-elements：将React元素（例如jsx的编译）提升到尽可能大的范围来加快协调速度并减少垃圾收集压力，从而避免了多次不必要的重新实例化。
@babel/plugin-transform-react-inline-elements：将 React元素(jsx) 内联为对象进项编译

使用 typescript

安装 typescript

yarn add typescript --dev

初始化 typescript 配置文件

tsc --init

安装 @babel/preset-typescript

yarn add @babel/preset-typescript --dev

安装 ForkTsCheckerWebpackPlugin

使用 eslint

安装

yarn add eslint eslint-loader --dev

eslint 初始化(根据需要初始化 eslint 配置)

eslint init

eslint --init 可以交互式的生成需要的 eslint 配置和安装一些需要的依赖包

结合Prettier和ESLint来规范代码

prettier
eslint-config-prettier

eslint-plugin-prettier

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

其他eslint插件

commit 前校验代码

yarn add husky lint-staged --dev

修改 package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "npm run eslint",
      "prettier .prettierrc.js --write",
      "git add"
    ]
  }

参考:

热更新

react-hot-loader
HotModuleReplacementPlugin
@hot-loader/react-dom：代替react-dom，兼容性更好
```
yarn add react-hot-loader @hot-loader/react-dom --dev
```

jest

安装

yarn add jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer --dev

生成配置

jest --init

可以根据官方提供的配置属性来定制化配置

enzyme

并通过 jQuery 风格的方式进行DOM 处理，开发体验十分友好。可转换react组件

yarn add enzyme enzyme-adapter-react-16 --dev

jest-enzyme

enzyme 的断言库，增加可读性，简化测试代码

yarn add jest-enzyme --dev

enzyme vs react-testing-library

enzyme 更适合测试实例方法，而react-testing-library更侧重测试DOM，专注于用户行为。目前官方脚手架使用的 react-testing-library

其他相关

build/env：通过.*.env 文件可已设置对应环境变量，详见 https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

kd-cloud-web / Blog

react + ts 项目模板搭建 #55