随着前端技术的发展，JavaScript也越来越重要，为了让不同浏览器和不同版本的JavaScript发挥类似的效果，如今我们采用了一种被称为“Babel”的工具。它可以将较新的JavaScript代码转换成浏览器支持的较旧版本，以兼容各种环境。本文将介绍一些Babel的常用插件及其使用方法，并给出相应的示例代码。
插件介绍
Babel-Preset-Env
这个插件能够根据目标浏览器或当前的运行环境，自动进行配置选择，即根据你使用的es6特性，自动转换为支持目标环境的代码。借助于这个插件，你可以只需要写一份ES6代码，并让babel-preset-env插件自己去决定如何转换。
Babel-Plugin-Transform-Async-To-Promises
这个插件帮助我们将ES6中的async / await语法，转换为更早的Promise语法。这个插件不需要额外的Polyfill支持，只需要使用Promise对象的对象，并且自动生成的代码Base64编码比底层的自带的Promise更小。
Babel-Plugin-Import-Directory
该插件允许你从单一路径导入整个文件夹到你的程序中，它会自动遍历这个目录并返回一个使用对象，其中键对应于文件名，值对应于导入的模块。
Babel-Plugin-React-Ref
使用该插件可以生成React组件引用，并赋值到定义的变量中。
使用方法
首先，我们需要新建一个名为“.babelrc”的文件，这个文件用于配置所需的Babel插件。下面是一个示例Babel的配置文件：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
------- -
-
---
-------
--
---------- -
------------------------------
-------------------
-----------
-
-上面的配置文件使用“env”和“react”预设，以及“transform-async-to-promises”，“import-directory”和“react-ref”插件。现在，这些插件将会被Babel自动加载。
接下来，我们看一下这些插件的使用方式:
Babel-Preset-Env
如果你要使用Babel-Preset-Env，你需要将其安装在你的开发中，使用以下的命令：
npm install @babel/preset-env --save-dev
然后，可以将“env”添加到 .babelrc 的预设数组中，并设置“targets”属性，以指定您要兼容的目标环境。例如，以下示例将“env”添加到 .babelrc：
-- -------------------- ---- -------
-
---------- -
-
------
-
---------- -
--------- -----
----- ----
--
-------------- --------
--------- ------
---------- ------
-
-
-
-上述配置告诉Babel，“env”应该被应用于本项目中，它要求将代码转换为兼容Chrome 58和IE 11的版本，并使用polyfill，以允许使用涉及到 ES6 发布前 ( ES2015 )的较新特性。
Babel-Plugin-Transform-Async-To-Promises
要使用babel-plugin-transform-async-to-promises，只需将其添加到plugins 数组中即可。例如：
{
"plugins": ["transform-async-to-promises"]
}如此，当你使用“async/await”语法时，Babel将自动转换它们。例如，下面的ES6代码
async function getUserDetails(username) {
const userInfo = await getUserInfo(username);
const userRepos = await getUserRepos(username);
return { ...userInfo, repos: userRepos };
}将被转换为：
function getUserDetails(username) {
return getUserInfo(username).then(function (userInfo) {
return getUserRepos(username).then(function (userRepos) {
return { ...userInfo, repos: userRepos };
});
});
}Babel-Plugin-Import-Directory
要使用Babel-Plugin-Import-Directory，只需按以下方式安装它：
npm i --save-dev babel-plugin-import-directory
然后，在 .babelrc 中，将插件添加到 plugins 数组中，如下所示：
{
"plugins": [
["import-directory", {
"extensions": ["js", "jsx"],
"outPath": "my-dir.js"
}]
]
}使用上面的配置，你可以从“my-dir.js”导入一个仅仅包含在目标文件夹下的所有module的对象。例如，在这个文件夹下，如果包含了以下代码，目录的结构和代码将生成如下所示的JavaScript对象：
├── my-dir
├── index.js // { 'name': <file requires>, ... }
├── a.js // { 'name': <file requires>, ... }
├── b.js // { 'name': <file requires>, ... }Babel-Plugin-React-Ref
要使用Babel-Plugin-React-Ref，你可以通过安装以下方式来获取它：
npm install --save-dev babel-plugin-react-ref
然后，在 .babelrc 中，将插件添加到 plugins 数组中，如下所示：
{
"plugins": ["react-ref"]
}在这之后，你就可以将生成的组件引用付给变量，例如：
import { getRef } from 'react-ref';
const ComponentRef = getRef(<Component />);结论
Babel是一个非常流行的JavaScript工具。不同的插件可帮助你转换代码以在不同的坏境下运行，从而与最新的JavaScript特性兼容。在这篇文章中，我们介绍了四种常用插件，以及它们各自的优劣点和用法，希望这些将会对你日常的前端编程工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a5891d91dce0dc880a4a3