随着前端技术的不断发展，JavaScript 作为前端开发的核心语言也在不断地变化和发展。尽管现代浏览器已经支持了大部分的 ES6+ 特性，但是为了兼容旧版本浏览器，我们仍然需要使用 Babel 来将新特性转换为旧版 JavaScript 代码。本文将介绍如何使用 Babel 7 编译 JavaScript。
Babel 7 的安装
Babel 7 是一个基于 Node.js 的工具，因此在使用它之前，需要先安装 Node.js。安装完 Node.js 之后，我们可以使用以下命令来安装 Babel 7：
npm install @babel/core @babel/cli @babel/preset-env --save-dev
其中，@babel/core 是 Babel 的核心模块，@babel/cli 是 Babel 的命令行工具，@babel/preset-env 是一个 Babel 插件，它可以根据目标浏览器或 Node.js 版本自动转换代码。
Babel 7 的配置
Babel 7 的配置文件是 .babelrc 或 babel.config.js，我们可以在项目根目录下创建一个 .babelrc 文件，然后在里面添加如下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- --- -- ---
-
-
-
-
-上面的配置表示使用 @babel/preset-env 插件来转换代码，其中 targets 字段表示需要兼容的浏览器或 Node.js 版本，这里指定了支持最新的两个浏览器版本和 IE9 以上的版本。
Babel 7 的使用
有了配置文件之后，我们就可以使用 Babel 7 来编译 JavaScript 代码了。在命令行中输入以下命令：
npx babel src --out-dir dist
其中，src 是源代码目录，dist 是编译后的代码目录。这个命令会将 src 目录下的所有 JavaScript 文件编译为旧版 JavaScript 代码，并存放到 dist 目录下。
示例代码
下面是一个使用 ES6 特性的示例代码：
const add = (a, b) => a + b; console.log(add(1, 2));
使用 Babel 7 编译后的代码如下：
"use strict";
var add = function add(a, b) {
return a + b;
};
console.log(add(1, 2));可以看到，使用 Babel 7 编译后的代码已经将 ES6 的箭头函数转换为了普通的函数，并使用了严格模式。这样就可以在不支持 ES6 特性的浏览器中正常运行了。
总结
本文介绍了如何使用 Babel 7 编译 JavaScript 代码，包括安装、配置和使用。通过 Babel 7，我们可以使用最新的 JavaScript 特性，同时也能够兼容旧版浏览器和 Node.js 版本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f518232b3ccec22fd3ef09