在 Windows 系统中使用 Babel7 编译 ES6/ES7-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用最新的 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 命令行窗口，输入以下命令，验证安装是否成功：

node -v
npm -v

如果分别输出了对应的版本号，说明安装成功。

初始化项目

在开始使用 Babel 进行编译之前，我们需要先创建一个新的项目，并安装 Babel 的相关依赖。我们可以在命令行窗口中输入以下命令，新建并初始化一个空的项目：

mkdir my-project
cd my-project
npm init -y

该命令会初始化一个 package.json 文件，用于记录该项目的基本信息和依赖关系。

安装 Babel

在项目中安装 Babel 的主要方式是使用 npm 安装 Babel 的相关依赖。Babel 虽然有很多不同的依赖，但我们只需要安装两个依赖：@babel/core 和 @babel/cli。它们分别是 Babel 的核心库和命令行工具。

在命令行窗口中输入以下命令，安装 Babel 的相关依赖：

npm install --save-dev @babel/core @babel/cli

配置 Babel

安装完 Babel 后，我们还需要在项目中进行相应的配置，告诉 Babel 执行哪些转换。我们需要创建一个 .babelrc 文件，用于存储 Babel 的配置文件。在项目根目录下新建 .babelrc 文件，输入以下内容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

上面的配置表明，我们使用了 @babel/preset-env，这个 preset 可以自动根据我们项目中使用的特性，来确定所需的 plugins 和 polyfills。也就是说，只要我们使用了新的 ES6/ES7 语法特性，Babel 会自动根据当前环境（比如当前的浏览器版本）来进行转换。

使用 Babel 进行编译

在完成了上述的配置之后，我们可以开始使用 Babel 进行编译了。我们不仅可以使用命令行工具进行编译，也可以使用 Gulp 或 Webpack 等构建工具进行自动化构建。这里我们仅介绍使用命令行的方式。

在命令行窗口中，输入以下命令：

npx babel src --out-dir dist

这里我们假设我们的源代码位于 ./src 目录下，经过编译后产生的目标代码会保存在 ./dist 目录下。Babel 执行编译后，我们就可以在 ./dist 目录下找到 ES5 代码，可以直接在浏览器中运行。

示例代码

接下来，我们通过一个示例来演示如何使用 Babel 进行编译。我们假设有一个 index.js 文件，其中包含了一些 ES6 语法：

const str = `Hello, world!`;
const arr = [1, 2, 3];
const logArr = () => console.log(...arr);
);
console.log(str);
logArr();

为了使用 Babel 进行编译，我们需要先在项目中安装 @babel/preset-env：

npm install --save-dev @babel/preset-env

然后，我们还需要在 .babelrc 中添加如下内容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

最后，我们在命令行窗口中执行以下命令，生成 ES5 代码：

npx babel index.js --out-file bundle.js

该命令会在当前目录下生成一个 bundle.js 文件，其中包含了经过 Babel 编译后的 ES5 代码。我们可以在浏览器中打开该文件，验证代码是否能够正常运行。

总结

本文主要介绍了如何在 Windows 系统中使用 Babel 进行编译 ES6/ES7 代码。我们首先要安装 Node.js 和 npm，在项目中安装 Babel 相关的依赖，然后配置 .babelrc 文件，最后使用命令行工具进行编译。使用 Babel 编译 ES6/ES7 代码，可以让我们更加方便的使用最新的 JavaScript 特性，同时也可以保证代码在不同浏览器下的兼容性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64d1d2b8b5eee0b525927883