babel需要这样配置-技术圈

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 V7.4.0 版本开始，已经不建议使用该包，建议使用 core-js/stable（JS语法）、regenerator-runtime/runtime （函数运行时）替代。

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

@babel/polyfill 依赖 corejs，corejs 是语法包，里面提供了很多的 ES6 语法，目前有两个版本，默认 core-js@2 版本，还有 core-js@3 版本，版本越高，支持的语法越多，包越大。

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

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

改善方式是通过按需加载。

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

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-runtimenpm install --save @babel/runtimenpm install --save @babel/runtime-corejs3npm install --save-dev @babel/corenpm install --save-dev @babel/preset-env

在.babelrc配置：

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