在前端开发中，ES6 和 ES7 的新特性可以让我们写出更加简洁、强大、易维护的代码，但是由于浏览器的兼容性问题，我们无法直接使用这些新特性。这时，Babel 就成为了我们的好帮手，可以将 ES6 和 ES7 的代码编译成浏览器可识别的 ES5 代码。
但是，在使用 Babel 进行编译的过程中，我们有时会遇到一些问题，例如编译后的代码体积变大、编译速度比较慢等，这些问题会对我们的开发效率和用户体验造成一定的影响。为了解决这些问题，本文将介绍最新、最好用的 Babel 编译 ES7 代码的解决方法。
使用 @babel/preset-env
@babel/preset-env 是一个官方推荐的 Babel 插件，它可以根据当前的环境，自动确定需要编译的代码，避免将不必要的转换应用到代码中。同时，它也支持按需加载 polyfill，减小编译后代码的体积。
安装
npm install --save-dev @babel/core @babel/cli @babel/preset-env
配置
在项目根目录下创建一个 .babelrc 文件，配置如下：
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions", "ie >= 9"]
}
}]
]
}在 targets 中配置需要兼容的浏览器，这里配置的是最近两个版本的主流浏览器和 IE9 及以上浏览器。
示例代码
以下是一个使用 async/await 的 ES7 代码，使用 @babel/preset-env 进行编译：
async function fetchData() {
const response = await fetch('/api/data')
const data = await response.json()
return data
}
fetchData().then(data => console.log(data))编译后的代码：
"use strict";
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } }
function fetchData() {
return _fetchData.apply(this, arguments);
}
function _fetchData() {
_fetchData = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
var response, data;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch('/api/data');
case 2:
response = _context.sent;
_context.next = 5;
return response.json();
case 5:
data = _context.sent;
return _context.abrupt("return", data);
case 7:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return _fetchData.apply(this, arguments);
}
fetchData().then(function (data) {
return console.log(data);
});使用 babel-plugin-transform-runtime
@babel/preset-env 在编译时会将一些新的 API 转换为浏览器可识别的代码，但是一些新的实例方法、静态方法和内置对象等还需要引入 polyfill 才能使用。为了减小编译后代码的体积，我们可以使用 babel-plugin-transform-runtime 插件来解决这个问题。
安装
npm install --save-dev @babel/core @babel/cli @babel/runtime @babel/plugin-transform-runtime
配置
在项目根目录下创建一个 .babelrc 文件，配置如下：
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions", "ie >= 9"]
}
}]
],
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}]
]
}示例代码
以下是一个使用 Set 对象的 ES7 代码，使用 babel-plugin-transform-runtime 进行编译：
const set1 = new Set([1, 2, 3]) console.log(Array.from(set1))
编译后的代码：
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _coreJsSet = _interopRequireDefault(require("core-js/set"));
var _from = _interopRequireDefault(require("@babel/runtime/core-js/get-iterator/from"));
var _console;
function _interopRequire(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var set1 = new _coreJsSet["default"]([1, 2, 3]);
console.log(_toConsumableArray(set1));总结
以上是最新、最好用的 Babel 编译 ES7 代码的解决方法，使用这些方法可以让我们在使用最新的 JavaScript 特性的同时，保障代码的运行效率和用户的体验。如果你正在使用 Babel 进行开发，不妨试试这些方法，相信一定会对你的开发效率和代码质量起到帮助作用。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b0d562add4f0e0ffa2f14d