在前端开发中，我们经常会用到 ES6/ES7 的新语法，但是这些新语法并不被所有的浏览器所支持。为了解决这个问题，我们可以使用 Babel 来将 ES6/ES7 的代码转换成 ES5 的代码，从而让所有的浏览器都能够支持这些新语法。
在 Node.js 中，我们同样可以使用 Babel 来转换我们的代码。本文将介绍如何在 Node.js 中使用 Babel，以及如何对其进行优化。
安装 Babel
在使用 Babel 之前，我们需要先安装它。可以使用以下命令来进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
其中，@babel/core 是 Babel 的核心模块，@babel/cli 是 Babel 的命令行工具，@babel/preset-env 则是 Babel 的预设模块，用于将 ES6/ES7 的代码转换成 ES5 的代码。
使用 Babel
命令行
在命令行中使用 Babel，可以使用以下命令：
npx babel src --out-dir lib
其中，src 是源代码所在的目录，lib 是转换后代码所在的目录。执行该命令后，Babel 会将 src 目录下的所有文件转换成 ES5 的代码，并将转换后的代码保存到 lib 目录中。
配置文件
在命令行中使用 Babel 虽然方便，但是每次执行命令都需要手动输入参数，比较麻烦。因此，我们可以使用配置文件来配置 Babel。
在项目根目录下创建一个名为 .babelrc 的文件，然后在文件中写入以下内容：
{
"presets": [
"@babel/preset-env"
]
}这里的 presets 是 Babel 的预设模块，用于将 ES6/ES7 的代码转换成 ES5 的代码。在这个例子中，我们使用了 @babel/preset-env 这个预设模块。
示例代码
下面是一个使用 Babel 转换 ES6 代码的示例：
// src/index.js
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2));转换后的代码如下：
// lib/index.js
"use strict";
var add = function add(a, b) {
return a + b;
};
console.log(add(1, 2));优化 Babel
虽然 Babel 可以很好地将 ES6/ES7 的代码转换成 ES5 的代码，但是在转换过程中，它可能会产生一些额外的代码，使得转换后的代码变得臃肿。因此，我们需要对 Babel 进行优化，以减少转换后的代码量。
按需引入
Babel 的预设模块 @babel/preset-env 可以将所有 ES6/ES7 的新特性都转换成 ES5 的代码，但是这可能会导致转换后的代码变得臃肿。因此，我们可以使用 useBuiltIns 选项来按需引入需要的新特性。
在 .babelrc 文件中添加以下内容：
// www.javascriptcn.com code example
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}这里的 useBuiltIns 选项指定了按需引入新特性的方式，corejs 指定了使用的 core-js 版本。
缓存转换结果
Babel 的转换结果可以被缓存起来，以便下次使用时可以直接使用缓存结果，从而提高转换的速度。可以使用 babel-loader 中的 cacheDirectory 选项来开启缓存。
在 Webpack 的配置文件中添加以下内容：
// www.javascriptcn.com code example
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true
}
}
}
]
}
};示例代码
下面是一个优化 Babel 后的示例：
// src/index.js
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2));转换后的代码如下：
// www.javascriptcn.com code example
// lib/index.js
"use strict";
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var _interopRequireDefault2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireDefault"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _add = _interopRequireDefault(require("./add"));
var App =
/*#__PURE__*/
function () {
function App() {
(0, _classCallCheck2["default"])(this, App);
}
(0, _createClass2["default"])(App, [{
key: "run",
value: function run() {
console.log((0, _add["default"])(1, 2));
}
}]);
return App;
}();
var app = new App();
app.run();可以看到，转换后的代码比原始代码要复杂一些，但是通过优化，我们可以将转换后的代码减少到最小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d388d3a941bf71346bafc3