随着前端技术的发展，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，你需要将其安装在你的开发中，使用以下的命令：
--- ------- ----------------- ----------
然后，可以将“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 数组中即可。例如：
- ---------- ------------------------------- -
如此，当你使用“async/await”语法时，Babel将自动转换它们。例如，下面的ES6代码
----- -------- ------------------------ - ----- -------- - ----- ---------------------- ----- --------- - ----- ----------------------- ------ - ------------ ------ --------- -- -
将被转换为：
-------- ------------------------ -
------ ----------------------------------- ---------- -
------ ------------------------------------ ----------- -
------ - ------------ ------ --------- --
---
---
-Babel-Plugin-Import-Directory
要使用Babel-Plugin-Import-Directory，只需按以下方式安装它：
--- - ---------- -----------------------------
然后，在 .babelrc 中，将插件添加到 plugins 数组中，如下所示：
-
---------- -
-------------------- -
------------- ------ -------
---------- -----------
--
-
-使用上面的配置，你可以从“my-dir.js”导入一个仅仅包含在目标文件夹下的所有module的对象。例如，在这个文件夹下，如果包含了以下代码，目录的结构和代码将生成如下所示的JavaScript对象：
--- ------
--- -------- -- - ------- ----- ---------- --- -
--- ---- -- - ------- ----- ---------- --- -
--- ---- -- - ------- ----- ---------- --- -Babel-Plugin-React-Ref
要使用Babel-Plugin-React-Ref，你可以通过安装以下方式来获取它：
--- ------- ---------- ----------------------
然后，在 .babelrc 中，将插件添加到 plugins 数组中，如下所示：
- ---------- ------------- -
在这之后，你就可以将生成的组件引用付给变量，例如：
------ - ------ - ---- ------------ ----- ------------ - ----------------- ----
结论
Babel是一个非常流行的JavaScript工具。不同的插件可帮助你转换代码以在不同的坏境下运行，从而与最新的JavaScript特性兼容。在这篇文章中，我们介绍了四种常用插件，以及它们各自的优劣点和用法，希望这些将会对你日常的前端编程工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670a5891d91dce0dc880a4a3