在前端开发中，我们经常会使用最新的 ECMAScript 规范（即 ES6/ES7）来编写 JavaScript 代码。而这些新特性在不同浏览器下的兼容性问题，让我们必须使用转译器（Transpiler）将其转换成可以运行的 ES5 代码。而 Babel 就是一款非常流行的 JavaScript 转译器，它可以快速将 ES6/ES7 代码转换成 ES5，同时通过各种插件和 preset，还可以支持 JSX，TypeScript 等其他语言的转换。本文主要介绍在 Windows 系统中如何使用 Babel7 进行编译。
安装 Node.js 和 npm
在使用 Babel 进行编译之前，我们首先需要安装 Node.js 和 npm，这两个工具能够帮助我们管理和安装项目中需要的各种包和依赖。在 Windows 系统中，我们可以通过官方网站下载 Node.js 安装包安装，安装完成之后，打开 cmd 命令行窗口，输入以下命令，验证安装是否成功：
---- -- --- --
如果分别输出了对应的版本号，说明安装成功。
初始化项目
在开始使用 Babel 进行编译之前，我们需要先创建一个新的项目，并安装 Babel 的相关依赖。我们可以在命令行窗口中输入以下命令，新建并初始化一个空的项目：
----- ---------- -- ---------- --- ---- --
该命令会初始化一个 package.json 文件，用于记录该项目的基本信息和依赖关系。
安装 Babel
在项目中安装 Babel 的主要方式是使用 npm 安装 Babel 的相关依赖。Babel 虽然有很多不同的依赖，但我们只需要安装两个依赖：@babel/core 和 @babel/cli。它们分别是 Babel 的核心库和命令行工具。
在命令行窗口中输入以下命令，安装 Babel 的相关依赖：
--- ------- ---------- ----------- ----------
配置 Babel
安装完 Babel 后，我们还需要在项目中进行相应的配置，告诉 Babel 执行哪些转换。我们需要创建一个 .babelrc 文件，用于存储 Babel 的配置文件。在项目根目录下新建 .babelrc 文件，输入以下内容：
-
---------- -
-------------------
-
-上面的配置表明，我们使用了 @babel/preset-env，这个 preset 可以自动根据我们项目中使用的特性，来确定所需的 plugins 和 polyfills。也就是说，只要我们使用了新的 ES6/ES7 语法特性，Babel 会自动根据当前环境（比如当前的浏览器版本）来进行转换。
使用 Babel 进行编译
在完成了上述的配置之后，我们可以开始使用 Babel 进行编译了。我们不仅可以使用命令行工具进行编译，也可以使用 Gulp 或 Webpack 等构建工具进行自动化构建。这里我们仅介绍使用命令行的方式。
在命令行窗口中，输入以下命令：
--- ----- --- --------- ----
这里我们假设我们的源代码位于 ./src 目录下，经过编译后产生的目标代码会保存在 ./dist 目录下。Babel 执行编译后，我们就可以在 ./dist 目录下找到 ES5 代码，可以直接在浏览器中运行。
示例代码
接下来，我们通过一个示例来演示如何使用 Babel 进行编译。我们假设有一个 index.js 文件，其中包含了一些 ES6 语法：
----- --- - ------- -------- ----- --- - --- -- --- ----- ------ - -- -- -------------------- -- ----------------- ---------
为了使用 Babel 进行编译，我们需要先在项目中安装 @babel/preset-env：
--- ------- ---------- -----------------
然后，我们还需要在 .babelrc 中添加如下内容：
-
---------- -
-------------------
-
-最后，我们在命令行窗口中执行以下命令，生成 ES5 代码：
--- ----- -------- ---------- ---------
该命令会在当前目录下生成一个 bundle.js 文件，其中包含了经过 Babel 编译后的 ES5 代码。我们可以在浏览器中打开该文件，验证代码是否能够正常运行。
总结
本文主要介绍了如何在 Windows 系统中使用 Babel 进行编译 ES6/ES7 代码。我们首先要安装 Node.js 和 npm，在项目中安装 Babel 相关的依赖，然后配置 .babelrc 文件，最后使用命令行工具进行编译。使用 Babel 编译 ES6/ES7 代码，可以让我们更加方便的使用最新的 JavaScript 特性，同时也可以保证代码在不同浏览器下的兼容性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64d1d2b8b5eee0b525927883