1. 简介
关于 es6 的内容想必大家都已不再陌生，因为 es10 都已经出来了，只要不是太老的浏览器版本基本都支持 es6 的大多数特性了。可以看这里：http://kangax.github.io/compat-table/es6/
当然，要保证 es6 或者 es7 的语法进行源码编写后完全可用，我们可以用 babel 将其转成 es5。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
关于 babel 的使用方法和原理都可以单列一个系列了，在此我们只讲述 babel 如何结合 webpack 使用。
2. 使用场景
我们来看一下，使用 es6 语法编写的代码，在编译后是如何的。
// index.js
const arr = [
new Promise(() => {}),
new Promise(() => {})
];
arr.map(item => {
console.log(item);
});
运行 npx webpack 命令查看打包信息：
再看一下打包后的代码，去除 webpack 自动生成内容，看一下 index.js 源码生成的内容。
发现 index.js 中的内容被原封不动的输出了，但是 es6 语法在某些低版本浏览器上并不支持，为了保证其兼容性，我们需要将其转为 es5。
3. 在 webpack 中使用 babel
如何在 webpack 中使用 babel 呢，我们打开https://www.babeljs.cn/setup
点击 webpack，如下：
我们按照指引来，首先，安装两个库：
npm install --save-dev babel-loader @babel/core
其中 babel-loader，就是帮助 webpack 进行打包的 babel 加载器，而 @babel/core 主要是做 js 源代码解析成 ast，以及 ast 编译成 js 这个工作的。
然后做如下配置：
// webpack.config.js
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
上面配置的意思就是对除 node_modules 目录以外的 js 文件 使用 babel-loader 进行处理。我们再运行一遍打包命令： npx webpack。可以看到：
可以看到 index.js 文件略为减小，部分代码被缩写了（换行取消）。但是内容本身并没有变化。其实现在代码已经经过了 babel-loader 的处理，但是 babel-loader 仅负责 webpack 和 babel 的沟通，让 webpack 在打包过程中能够调用 babel 的相关 api，比如 @babel/core 的代码转换功能，但是并没有做 es6 -》 es5 的转换。要想进行这种转换，我们需要下载转换规则插件。
如下：
npm install @babel/preset-env --save-dev
按照指引要求，我们新建一个 .babelrc 文件：
{
"presets": ["@babel/preset-env"]
}
可以看到
文件大小基本没变，es6 的箭头函数成功转成了 es5 的function。非常好~但是，promise 和 map 函数是 es6 才有的，es5 并没有啊。
这里我们得简要了解一下 babel 的转换机制。看官方文档：
简单来说，babel 其实是通过一系列语法转换插件来实现语法的转换，比如实例中的箭头函数转换插件。为了避免我们手动引入众多插件的麻烦，我们可以使用 preset 来定义一系列插件。@babel/preset-env 就是这样一个 preset 库，能够根据指定的条件自动引入需要的插件。但是语法转换插件并不负责为我们进行特性支持，比如上述的 promise 和 map。为了解决这个问题，需要引入另一个库https://www.babeljs.cn/docs/babel-polyfill
：
npm install --save @babel/polyfill
记住这里是 --save 而不是 --save-dev。然后我们在 index.js 引入该模块。
// index.js
import '@babel/polyfill';
打包后如下：
好了，可以看到文件大小猛增，这是因为 polyfill 为我们引入es6+ 的所有 stage4 阶段的语法特性支持库。但很显然，这里我们只需要 promise 和 map 即可。看文档描述：
pollyfill 需要和 @babel/preset-env 和 useBuilIns 配置一起配合使用，否则会引入es6+ 的所有 stage4 阶段的语法特性支持库。如下：
{
"presets": [
[
"@babel/preset-env",
{
"corejs": 2,
"useBuiltIns": "usage"
}
]
]
}
可以看到，打包后的代码体积显著减小。这是因为 "useBuiltIns": "usage" 指定只将源码中涉及到的语法特性进行补足。如果足够细心的网友可能会发现, 此时我们不需要再手动在 index.js 引入 polyfill 了，webpack 会为我们自动引入。另外，打包后的 index.js 值补足了 promise 方法，却并没有补足 map 方法。这是因为 polyfill 还会根据我们需要支持的浏览器类型和版本，选择性地进行补足。比如：
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "67"
},
"corejs": 2,
"useBuiltIns": "usage"
}
]
]
}
打包后，
文件大小几乎没有变化，我们发现没有 promise 的 polyfill 没有被补充，甚至语法转换都没有：
这是因为 chrome67 以上支持上述 es6 语法和特性，无需额外转换和补足。现在我们可以猜想，没有指定 targets 时，使用的默认 targets 是无需补足 map 的，我们把支持的浏览器加一个低版本的 ie 浏览器看一下：
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "67",
"ie": "8"
},
"corejs": 2,
"useBuiltIns": "usage"
}
]
]
}
可以发现比不明确指明 targets 时稍大，看一下生成 index.js 文件，发现引入了 map 相关的 polyfill:
4. 利用 @babel/plugin-transform-runtime 注入
我们先来看一下什么是 @babel/plugin-transform-runtime。
Babel uses very small helpers for common functions such as
_extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files.
This is where the@babel/plugin-transform-runtimeplugin comes in: all of the helpers will reference the module@babel/runtimeto avoid duplication across your compiled output. The runtime will be compiled into your build.
Another purpose of this transformer is to create a sandboxed environment for your code. If you directly import core-js or @babel/polyfill and the built-ins it provides such asPromise,SetandMap, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can't exactly control the environment in which your code will run.
The transformer will alias these built-ins tocore-jsso you can use them seamlessly without having to require the polyfill.
我们可以看到，@babel/plugin-transform-runtime 主要是为了注入代码的复用，以及防止在开发三方库时，直接导入core-js或@babel/polyfill及其提供的内置组件(如Promise、Set和Map)所造成的全局污染。
如下：
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime @babel/runtime-corejs2
并做如下配置：
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false,
"version": "7.0.0-beta.0"
}
]
]
}
打包后如下：
5. 直接在 webpack.config.js 中进行配置
上面我们是通过单独的 .babelrc 文件进行配置，其实这种配置也是推荐的一种配置，方便迁移。如果只想在 webpack 使用，其实在 webpack.config.js 中进行配置也是一样的。参考babel-loader
参考
docs-babel
webpack-babel-loader
docs-babel-core
@babel/preset-env useBuiltIns 说明
babel-loader
https://www.babeljs.cn/docs/babel-plugin-transform-runtime
