babel升级目的

支持ES2015+更高级的语法
Polyfill的优化

babel如何升级

1. 运行命令自动升级到babel7

npx babel-upgrade --write  // 执行升级指令，babel相关的依赖会自动升级
rm -rf node_modules。      // 为避免依赖出现问题，删除node_modules中的依赖
yarn install              // 重新安装babel依赖

2. 修改所有 bable-polyfill 为 @babel/polyfill

在之前的babel版本中，我们会在项目中手动引入babel-polyfill，以上步骤的命令执行之后，babel的polyfill升级为7以后的版本，命名也发生了改变，需要我们在项目中更换依赖名

3. 处理装饰器（配置版本）

执行命令：yarn add @babel/plugin-proposal-decorators -D

// 在babel文件中配置
[
  "@babel/plugin-proposal-decorators",
  {
    "legacy": true // 装饰器插件新增的 legacy 配置
  }
],

注意： @babel/plugin-proposal-decorators 必须在 @babel/plugin-proposal-class-properties 之前配置

4. 配置plugins

plugins: [
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-export-default-from",
]

提示： 可以通过查看 babel官方文档的提示判断是否需要单独配置在plugins中，如果包含在preset-env中，则不需要单独配置。若不在，则根据项目中是否有语法需要用该插件处理，来决定是否需要单独配置。
在这里插入图片描述

5. 配置presets

删除stage，presets 废弃 stage-0、stage-1、stage-2、stage-3，
使用 @babel/preset-env 代替所有预设配置项，包含基础的es5代码的转换规则插件。

其他的功能以插件的形式引入，如@babel/plugin-proposal-decorators

"presets": [
    [
        "@babel/preset-env",
        {
            "useBuiltIns": "usage"，
            "corejs": { version: "3" }
        }
    ],
    "@babel/preset-react"
],
"plugins": [
    "@babel/plugin-transform-runtime",
]

提示：@babel/preset-env配置 useBuiltIns 参数，设置值为 usage 时，目的只会包含代码需要的 polyfill 。注意：配置此参数的值为 usage ，必须要同时设置 corejs3或corejs2

@babel/plugin-transform-runtime 插件，所有帮助程序都将引用模块 @babel/runtime，这样就可以避免编译后的代码中出现重复的帮助程序，有效减少包体积。@babel/runtime 必须要作为生产依赖被安装
去掉代码中引入的 import ‘@babel/polyfill’, 可以卸载掉 @babel/polyfill 包运行npm uninstall @babel/polyfill 命令

注意：