前言
随着 JavaScript 的不断发展，新的语法和新的特性不断涌现。ES6 作为 JavaScript 的一个里程碑，引入了很多新的特性和语法，如箭头函数、扩展运算符、解构赋值、Promise 等等。然而，由于 ES6 目前的支持程度并不完美，特别是在很多旧浏览器上还不支持，为了在多种浏览器环境下保证代码的兼容性，我们需要引入工具来转译代码，将 ES6 的语法转换为 ES5 的语法，这样可以使代码在更广泛的环境下无缝运行。
Babel 是目前最为流行的 JavaScript 转译工具。在 Babel 7 中，对之前版本做了较大的升级，因此有必要了解升级后的规则和使用方法，本文将对 Babel 7 的升级和 ES6->ES5 转译做详细的讲解和指导。
Babel 7 升级
依赖变化
Babel 7 与之前的版本存在一些依赖变化，最为显著的就是在使用时需要引入不同的依赖库：
# Babel 6 npm install --save-dev babel-cli babel-preset-es2015 # Babel 7 npm install --save-dev @babel/cli @babel/core @babel/preset-env
配置变化
Babel 7 在配置上进行了较大的变化，不再像之前那样使用 .babelrc 配置文件。Babel 7 将配置信息存放在 package.json 文件中的 babel 字段里，可以使用下面的命令创建并打开 package.json：
npm init -y
在 package.json 中配置 babel：
-- -------------------- ---- -------
-
------- ---------
---------- --------
------- -----------
-------- -
---------- ---------------------
--
---------- -
-------- ------ --- -- ----
--
------------------ -
------------- -----------
-------------- -----------
-------------------- ----------
-
-使用方法
使用 Babel 7 的方法与之前版本相比有较大变化。在之前的版本中，我们使用 babel 命令进行代码转换，例如：
babel src/index.js --out-file lib/index.js
在 Babel 7 中，我们需要使用 @babel/cli 来进行代码转换。使用方法如下：
npx babel src/index.js --out-file lib/index.js
这里 npx 是 npm 5.2+ 自带的一个命令，用于执行当前项目安装的 npm 包中的可执行文件。如果你的 npm 版本比较旧，也可以通过 npm install -g @babel/cli 全局安装 @babel/cli 后使用 babel 命令。
配置 preset-env
在 Babel 7 中，我们需要使用 @babel/preset-env 来转换 ES6 代码，这个 preset 集成了很多不同的插件，包括转换 ES6 语法、Promise 和一些新的全局变量等，通过配置 @babel/preset-env，我们可以针对不同的浏览器版本、node 版本等特定的环境进行编译，生成不同的运行时代码，达到最佳的性能和兼容性。
在 babel 字段中添加 @babel/preset-env：
-- -------------------- ---- -------
-
-------- -
---------- -
--------------------- -
---------- -
--------- ---
----- --
-
--
-
-
-上面的配置将使用 @babel/preset-env 转换代码，同时指定浏览器版本和 node 版本，这样生成的代码将能在 Chrome 58 和 IE 11 以及 Node.js 版本 6 中运行。如果想要让转换更加细致，可以使用更多配置项进行定制，更多的配置选项可以参考文档。
ES6->ES5 转译
Babel 7 已经配置好了 @babel/preset-env，我们只需要在代码中使用 ES6 语法，然后运行 npx babel 命令就可以将 ES6 代码转换为 ES5 代码。例如，下面是一个简单的 ES6 模块，定义了一个 square 函数：
// src/index.js export const square = (x) => x * x;
我们可以运行 npx babel src/index.js --out-file lib/index.js 转换该模块，生成的 ES5 代码如下：
-- -------------------- ---- ------- -- ------------ ---- -------- ------------------------------ ------------- - ------ ---- --- -------------- - ---- -- --- ------ - -------- --------- - ------ - - -- -- -------------- - -------
可以看到，经过 Babel 转换后，ES6 的箭头函数被转换为了 ES5 的普通函数，其他 ES6 特性也得到了相应的转换。在生成的代码中，除了 use strict 指令，还给导出变量添加了 Object.defineProperty，这是为了保持 ES6 和 ES5 的模块模式一致。
总结
Babel 是前端开发中不可或缺的一环，通过 Babel 我们可以不用过多考虑代码的兼容性问题，而专注于开发功能。Babel 7 的升级引入了更多的依赖和更改了配置方案，但在集成了 @babel/preset-env 后，ES6->ES5 的转译变得更加简单和方便。开发者可以定制 @babel/preset-env，针对不同的环境生成相应的代码来达到最优的性能和兼容性。掌握 Babel 7 的升级和 ES6->ES5 转译，对于提高前端开发效率，确保代码质量和代码兼容性有着重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b03ce968c7c53b0a76495