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')
  ],
}

其他插件

1. ManifestPlugin：用于生成资产清单
2. WebpackBar：用于优化进度条
3. FriendlyErrorsPlugin：优化error信息
4. CopyPlugin：静态文件拷贝
5. CaseSensitivePathsPlugin：路径有误相关
6. CompressionPlugin：代码压缩
7. 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插件

• eslint-plugin-jest
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y
• eslint-config-prettier-standard

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"
    ]
  }

参考:

• ESLint+Prettier统一TypeScript代码风格
• Using ESLint and Prettier in a TypeScript Project

热更新

• 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 文件可已设置对应环境变量，详见 create-react-app.dev/docs/adding…

作者：zzkkui