前言
在前端开发中，使用 ECMAScript 版本的升级是一个必须经历的过程。但是，新版本的特性在低版本浏览器中并不支持，为了解决这个问题，开发者们就需要使用到 babel 的转译工具。
本文将重点介绍 babel-preset-es2017 这个 npm 包的使用方法，以及如何在项目中正确配置它。
Babel-preset-es2017 简介
babel-preset-es2017 是 babel 的一个插件，用于将 ES2017 代码转译成 ES5 代码。通过使用 babel-preset-es2017，开发者可以在不同浏览器和不同环境下运行最新的 ECMAScript 标准代码。
安装
在安装 babel-preset-es2017 之前，需要确保你已经安装了 babel 和相关插件，包括 babel-cli、babel-core、babel-preset-env 等。如果还没有安装，请先在 Package.json 文件中添加依赖项并进行安装。
{
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-core": "^6.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2017": "^6.0.0"
}
}在安装完成后，还需要进行配置才能使 babel-preset-es2017 插件起作用。
配置
在项目的根目录下，创建一个 .babelrc 文件，并添加以下内容：
{
"presets": ["es2017"]
}注意，如果你是通过 babel-preset-env 来使用 es2017 的，那么在 presets 中应该同时添加 env 和 es2017，如下：
{
"presets": ["env", "es2017"]
}这样配置就完成了。下面，我们来看一下如何使用此插件。
使用
在项目中，我们需要使用 babel-cli 来进行命令行的转译。
babel demo.js --out-file demo-transpiled.js
上述命令会将 demo.js 文件中的 ES2017 代码转译成 ES5 代码，并将结果输出到 demo-transpiled.js 文件中。
示例
下面是一段 ES2017 中的 async/await 语法的代码：
async function getText() {
const response = await fetch('https://api.example.com/data.json');
const data = await response.text();
return data;
}通过 babel-preset-es2017 插件，将其转译成 ES5 代码：
-- -------------------- ---- -------
---- --------
-------- --------- -
--- ----- - -----
------ --------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ ---------------------------------------------------------------------
---- --
----------- - --------------
------------- - --
------ ---------------------------------------------
---- --
------ ------------------------- ---------------
---- --
---- ------
------ ----------------
-
-
-- ----- -------
-可以看到，在经过 babel-preset-es2017 转译之后，原来的 async/await 语法被转化成了 ES5 的 Generator 函数。
总结
本文对 babel-preset-es2017 插件进行了简要介绍，并详细介绍了该插件的安装、配置以及使用方法。通过本文的介绍，相信读者已经掌握了使用该插件的基本技能，能够在项目中使用 ES2017 的最新语法特性。
值得注意的是，babel-preset-es2017 插件只能做到将 ES2017 的代码转译成 ES5 代码，但并不能处理新的原生 API 以及浏览器特性，因此，在项目中除了要配置该插件外，还需要注意其他的兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/125275