前端|babel升级

问题

• 项目不支持可选链调用
• 过多的 babel 插件

步骤

1. 基础包

• dependencies
  • “react-scripts”: “5.0.1”
• devDependencies
  • “customize-cra”: “^1.0.0”,
  • “react-app-rewired”: “^2.2.1”,

2. 框架包

• dependencies
  • “react”: “16.13.1”,
  • “react-dom”: “16.13.1”,
    “react-router”: “^4.3.1”,
    “react-router-dom”: “^4.3.1”,
• devDependencies
  • “customize-cra”: “^1.0.0”,
  • “react-app-rewired”: “^2.2.1”,
  • “less-loader”: “4.1.0”,
  • “lint-staged”: “^7.2.0”,
  • “prettier”: “^2.3.2”,
  • “styled-components”: “^5.2.0”,
  • “cross-env”: “^5.2.0”,

3. 构建包

• “happypack”: “^5.0.1”,
• “react-app-rewire-happy-pack”: “^1.0.0”,
• “react-app-rewire-webpack-bundle-analyzer”: “^1.0.1”,
• “terser-webpack-plugin”: “^5.3.9”,
• “webpack-bundle-analyzer”: “^2.13.1”,
• “webpackbar”: “^5.0.2”

4. 业务包

其他问题处理

1. 全路径问题 fully specific
   webpack5 对路径的要求也更严格，需要是全路径 mjs 支持
   addWebpackModuleRule({
   test: /.m?js/,
   resolve: {
   fullySpecified: false,
   },
   }),

2. babel/runtime

• 首先第一个问题是有很多 babel/runtime 相关的报错，而且报错的地方不在我们的项目里，而是在 node_modules 里面
  yarn add -D @babel/runtime

3. node ployfill
   webpack5 也移除了 node 模块的 ployfill，以后我们用到的需要自己安装了，
   基本上 node ployfill 项目中也很少用到，我这边看到的报错，大部分还是 node_modules 里看到的。
   yarn add -D stream

4. postcss
   yarn add -D postcss-at-rules-variables

create-react-app react-scripts 升级，从 3.x 升到 5.x 踩坑（webpack5 升级踩坑）