babel需要这样配置-CFANZ编程社区

Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印输出。

Babel的核心功能位于 @babel/core 模块中。安装：

npm install --save-dev @babel/core

现在，Babel 虽然开箱即用，但是什么动作都不做。它基本上类似于 const babel = code => code; ，将代码解析之后再输出同样的代码。如果想要 Babel 做一些实际的工作，就需要为其添加插件。

要将 ES2015+ 语法转换为 ES5，我们可以安装以下官方插件 plugin：

npm install --save-dev @babel/plugin-transform-arrow-functions

现在，我们代码中的所有箭头函数都将转换为ES5兼容的函数表达式：

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

除了一个一个的添加插件，你还可以以预设 preset 的形式启用一组插件。

npm install --save-dev @babel/preset-env

babel 在编译时候，会把源代码分为两部分来处理：语法 syntax、API。语法 syntax 比如 const、let、模版字符串、扩展运算符等。 API 比如 Array.includes() 等新函数。

预设/插件只会处理第一部分，也就是语法部分。@babel/polyfill，它是被用来处理上述说的 API 部分的：为浏览器不支持的 API 提供对应的兼容性代码，很明显如果你不提供，如果在不支持的浏览器里面使用了新 API ，那么你的页面就会挂掉。

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "entry",
        "corejs": "3"
      }
    ]
  ]
}
// 然后你需要在你的项目入口文件中顶部引入polyfill。
import '@babel/polyfill'。

@babel/polyfill 依赖 core-js，core-js 提供浏览器不支持的 API，目前有两个版本，默认 core-js@2 版本，还有 core-js@3 版本，版本越高，支持的语法越多，包越大。

从 babel V7.4.0 版本开始，已经不建议使用该包，建议使用 core-js/stable、regenerator-runtime/runtime 替代，所以再改下我们的配置。

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "entry",
        "corejs": "3"
      }
    ]
  ]
}
// 然后你需要在你的项目入口文件中顶部引入polyfill。
import "core-js/stable";
import "regenerator-runtime/runtime";。

此时 @babel/polyfill 拆分成了两个独立的包，变成 core-js/stable 和 regenerator-runtime/runtime 包。

@babel-polyfill会带来的一些问题。

1、代码体积大，因为会全部导入，不管你用不用的上。

改善方式是通过按需加载。只需要将 useBuiltIns 配置从 entry 改成 usage ，然后删除入口配置。

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

// 然后你需要在你的项目入口文件中顶部引入polyfill。
// 删除：import "core-js/stable";
// 删除：import "regenerator-runtime/runtime";。

2、会造成全局污染，比如引入新的全局对象或者修改现有对象原型。

@babel/runtime，是一个底层依赖，是一个生产环境依赖，需要被打包到最终的产物中，它本身会提供的是regenerator-runtime、以及各种helper函数。

我们日常更多的使用到的是 @babel/plugin-transform-runtime，这是一个开发环境依赖，插件会依赖到 @babel/runtime、@babel/runtime-corejs3等。

关于@babel/plugin-transform-runtime我们需要知道两点，1、babel在转码syntax过程中，会加入自己定义的很多babel函数，这些babel函数可能会在每个文件都被重复引用，transform-runtime会把这些重复的helper函数转换成公共的、单独的依赖，节省转码后的文件体积。2、解决上述中@babel/polyfill会带来的一些问题，transform-runtime以沙盒的方式将新特性API对应的全局变量转换为core-js、regenerator-runtime的引用。

安装以下依赖：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

在.babelrc配置：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}