前些天使用了 babel7，特来做个笔记。
presets
在 babel7 中，已经废弃了之前的阶段性提案，现在统一使用 @babel/preset-env。所以呢，这里倒是省去了一些麻烦。在 webpack 配置中 preset-env 配合 babel-loader 就可以转换 ES2015+ 语法了。同时，官方建议我们使用 targets 设定目标浏览器决定需要兼容的功能。举个例子：
module.exports = { presets: [ [ '@babel/preset-env', { targets: { ie: "11" } } ] ]}polyfill
polyfill 在之前都是用来引入新的 api 和功能的。如我们常用的 promise，Object.assign 等。在 babel6 及之前，只需要在入口引入 polyfill 即可。然而这也带来了问题，一次性加载了整个 polyfill，十分冗余。 而用了 babel7 通过简单的配置就可以达成按需加载的目的，我们也不再需要手动引入 polyfill。
useBuiltIns
没错，使用这个新的配置项，就可以实现按需加载 polyfill。其值可取以下3个：
false
值为 false 的时候，相当于没用，这时就得手动引入所有的 polyfill。
entry
使用 entry 的时候，也需要手动引入 polyfill，即 import '@babel/polyfill';，同时也引入了所有的 polyfill。这个配置项，总觉得没什么用，如果有老哥知道的话可以在评论区提出一起讨论。
usage
值为 usage 的时候，无需引入 polyfill，babel 会自动按需加载需要的功能：
{ \\... useBuiltIns: 'usage'}如果需要在命令行打印加载项，可以设置 debug：
{ \\... useBuiltIns: 'usage', dubug: true}plugin-transform-runtime
例如使用 class（类） 的时候，babel 会在这前面添加一个帮助函数。如下所示：
源代码：
// source codeclass Test {}编译后：
"use strict";function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }var Test = function Test() { _classCallCheck(this, Test);};可以看到，在编译输出的代码里，helper 函数被直接嵌入代码中。如果你只有这一个 js 文件用到了这个 helper，那这样并没有问题。但试想一下，如果你有很多个脚本文件，每一个你都用到了 class，babel 可不管你这么多，每个编译后的文件都包含一个一模一样的 helper 函数，便造成了冗余。所幸，我们可以使用 @babel/plugin-transform-runtime 和 @babel/runtime 来解决这个问题。添加如下配置：
plugins: [ '@babel/plugin-transform-runtime']此时再编译上面的代码，得到的结果如下：
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var Test = function Test() { (0, _classCallCheck2.default)(this, Test);};此时不再是直接把 helper 函数嵌入代码中，而是使用 require 加载公共 helper。
总结
上面说了这么多，现在给出 babel7 和 webpack 的一个实践作为结束。
1.添加依赖
cnpm i --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime// &cnpm i --save @babel/polyfill @babel/runtime2.webpack 配置
module.exports = { // ... module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ] }};3.babel 配置
// babel.config.jsmodule.exports = { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', targets: { ie: 10 // 根据自己的目标环境进行配置 }, debug: true, // corejs这一项也需要加上，corejs有2和3两个版本 // 如果不确定有没有下载core-js，可执行 cnpm i core-js@3 --save corejs: 3 } ] ], plugins: [ '@babel/plugin-transform-runtime' ]};