在 webpack 中编写 JavaScript 代码，可以使用最新的 ES 语法，而最终打包的时候，webpack 会借助 Babel 将 ES6+语法转换成在目标浏览器可执行 ES5 语法。所以 Babel 是一个重要的知识点需要掌握。
什么是 Babel
Babel 是 JavaScript 的编译器，通过 Babel 可以将我们写的最新 ES 语法的代码轻松转换成任意版本的 JavaScript 语法。随着浏览器逐步支持 ES 标准，我们不需要改变代码，只需要修改 Babel 配置即可以适配新的浏览器。
举例说明，下面是 ES6 箭头函数语法的代码：
[1,2,3].map(n => n**2);
经过 Babel 处理后，可以转换为普通的 ES5 语法：
[1,2,3].map(function(n) { return Math.pow(n, 2); });
Babel 初体验
下面来介绍下 Babel 的安装和功能及其配置文件。
1. 使用 babel-cli 命令行工具
Babel 本身自己带有 CLI（Command-Line Interface，命令行界面）工具，可以单独安装使用。下面我们在项目中安装 @babel/cli 和 @babel/core。
npm i -D @babel/core @babel/cli
然后创建一个 babel.js 文件：
// babel.js [1,2,3].map(n => n**2);
然后执行npx babel babel.js，则会看到输出的内容，此时可能会看到输出的内容跟源文件内容没有区别，这是因为没有加转换规则，下面安装@babel/preset-env。然后执行 CLI 的时候添加 --presets flag：
// 安装 preset-env npm i -D @babel/preset-env // 执行 CLI 添加 --presets npx babel babel.js --presets=@babel/preset-env
最终输出的代码就是转换为 ES5 的代码了：
‘use strict' [1,2,3].map(function(n) { return Math.pow(n, 2); });
如果要输出结果到固定文件，可以使用 --out-file 或 -o 参数：
npx babel babel.js -o output.js。
Tips: Babel 7 使用了 @babel 命名空间来区分官方包，因此以前的官方包 babel-xxx 改成了 @babel/xxx。
2.配置文件
除了使用命令行配置 flag 之外，Babel 还支持配置文件，配置文件支持两种：
使用 package.json 的 babel 属性；
在项目根目录单独创建 .babelrc或者 .babelrc.js文件。
示例如下：
// package.json { ‘name': ‘my-package', ‘version': ‘1.0.0', ‘babel': { ‘presets': [‘@babel/preset-env'] } } // .babelrc { ‘presets': [‘@babel/preset-env'] }
Babel会在正在被转义的文件当前目录中查找一个 .babelrc 文件。 如果不存在，它会向外层目录遍历目录树，直到找到一个 .babelrc 文件，或一个 package.json 文件中有 "babel": {}。
3.env 选项
如果我们希望在不同的环境中使用不同的 Babel 配置，那么可以在配置文件中添加 env 选项：
{ ‘env': { ‘production': { ‘presets': [‘@babel/preset-env'] } } }
env 选项的值将从 process.env.BABEL_ENV 获取，如果没有的话，则获取 process.env.NODE_ENV 的值，它也无法获取时会设置为 "development"。
Babel 的插件和 Preset
Babel 的语法转换是通过强大的插件系统来支持的。Babel 的插件分为两类：转换插件和语法解析插件。
不同的语法对应着不同的转换插件，比如我们要将箭头函数转换为 ES5 函数写法，那么可以单独安装 @babel/plugin-transform-arrow-functions 插件，转换插件主要职责是进行语法转换的，而解析插件则是扩展语法的，比如我们要解析 jsx 这类 React 设计的特殊语法，则需要对应的 jsx 插件。
如果不想一个个的添加插件，那么可以使用插件组合 preset（插件预设，插件组合更加好理解一些），最常见的 preset 是 @babel/preset-env。之前的 preset 是按照 TC39 提案阶段来分的，比如看到 babel-preset-stage-1 代表，这个插件组合里面是支持 TC39< Stage-1 阶段的转换插件集合。
@babel/preset-env 是 Babel 官方推出的插件预设，它可以根据开发者的配置按需加载对应的插件，通过 @babel/preset-env 我们可以根据代码执行平台环境和具体浏览器的版本来产出对应的 JavaScript 代码，例如可以设置代码执行在 Node.js 8.9 或者 iOS 12 版本。
Babel polyfill
Babel 只负责进行语法转换，即将 ES6 语法转换成 ES5 语法，但是如果在 ES5 中，有些对象、方法实际在浏览器中可能是不支持的，例如：Promise、 Array.prototype.includes，这时候就需要用 @babel/polyfill 来做模拟处理。@babel/polyfill 使用方法是先安装依赖，然后在对应的文件内显性的引入：
// 安装，注意因为我们代码中引入了 polyfill，所以不再是开发依赖（--save-dev，-D） npm i @babel/polyfill
在文件内直接 import 或者 require 进来：
// polyfill import ‘@babel/polyfill' console.log([1,2,3].includes(1));
Bable runtime
@babel/polyfill 虽然可以解决模拟浏览器不存在对象方法的事情，但是有以下两个问题：
直接修改内置的原型，造成全局污染；
无法按需引入，Webpack 打包时，会把所有的 Polyfill 都加载进来，导致产出文件过大。