前言
随着前端技术的飞速发展，JavaScript 已经成为了网页制作中最常用的编程语言，在前端生态圈中占有重要地位。而随着前端开发的规模不断扩大，为了提高开发效率和代码质量，前端工程化已经变得不可或缺。在前端工程化中，自动化构建工具也变得愈加重要，历经多年的发展，现在已经有很多优秀的自动化构建工具，其中 fis3 是一款非常流行的自动化构建工具，而 fis3-parser-babeljs 就是 fis3 中的一款插件，用于将 ES6+ 语法编译为浏览器可识别的 ES5 语法。
fis3-parser-babeljs 的安装
fis3-parser-babeljs 是通过 npm 安装的，因此需要先安装 Node.js 和 npm。如果你还没有安装 Node.js 和 npm，可以到官网下载安装包并安装。
安装 fis3-parser-babeljs 有两种方法：
- 通过 npm 安装
--- ------- ------------------- ----------
- 在项目根目录的
package.json文件中添加依赖后执行npm install
-
------------------ -
---------------------- --------
-
-fis3-parser-babeljs 的使用
在 fis3 中配置
在 fis3 中使用 fis3-parser-babeljs 很简单，只需要在 fis-conf.js 文件中进行配置即可。
下面是一个简单的 fis-conf.js 配置文件，将所有 src 目录下的 .js 文件编译为浏览器可识别的 ES5 语法。
---------------------- - ------- ---------------------- ----- ----- ---
可以看到，只需要将插件名称传递给 fis.plugin() 方法即可使用插件。需要注意的是，这里的 "babeljs" 是插件的名称，需要保持与安装时指定的名称一致。
插件参数配置
fis3-parser-babeljs 插件支持很多参数配置，在此只介绍部分常用的参数。
presets
presets 参数是用来指定 babel 预设的，它可以是一个字符串数组或一个对象。下面我们以 @babel/preset-env 为例来介绍如何使用 presets。
- 在项目根目录中执行以下命令安装
@babel/preset-env
--- ------- ----------------- ----------
- 在 fis-conf.js 中进行设置
---------------------- -
------- --------------------- -
-------- -
--------------------- -
-------- -
--------- ------ - ---------- --- -- ----
-
--
-
---
----- -----
---在上面的配置中，我们将 @babel/preset-env 设为 presets 的第一个元素，并且传递了一个 targets 对象，用于指定浏览器的兼容性。这里我们指定了 最近的两个版本以及 IE10 及以上版本。根据我们设置的 targets，babel 会对代码进行相应的转换。
plugins
plugins 参数用于指定 babel 插件，它可以是一个字符串数组或一个对象。
例如，需要使用 @babel/plugin-proposal-decorators 插件
- 在项目根目录中执行以下命令安装
@babel/plugin-proposal-decorators
--- ------- --------------------------------- ----------
- 在 fis-conf.js 中进行设置
---------------------- -
------- --------------------- -
-------- -
------------------------------------- -------- ------
-
---
----- -----
---在上面的代码中，我们将 @babel/plugin-proposal-decorators 设置为 plugins 的第一个元素，并且传递了 legacy 为 true，表示使用旧的装饰器语法转换。
示例代码
下面是一个使用 fis3-parser-babeljs 插件的示例代码。
-- --------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ---------------
-
-
----- -- - --- ----------------
-----------
-- ---
---- --------
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
--- ------ - -------- ------------ -
--------------------- --------
--------- - -----
--
---------------------- - -------- -- -
---------------- -- ---- -- - - -----------
--
--- -- - --- ----------------
-----------这段代码使用了 ES6 的 class 和模板字符串，这些语法在低版本的浏览器中是不被支持的。如果没有启用 fis3-parser-babeljs 的话，这段代码是不能正常运行的，但是启用了 fis3-parser-babeljs 则可以将这段代码编译成浏览器可识别的 ES5 语法，从而可以在低版本的浏览器中正常运行。
总结
如果你想提高前端工作效率和代码质量，前端工程化就是不可或缺的一部分。而自动化构建则是前端工程化的关键要素之一。fis3-parser-babeljs 插件可以帮助我们将 ES6+ 语法编译成浏览器可识别的 ES5 语法，从而使前端代码可以兼容低版本的浏览器。使用 fis3-parser-babeljs 需要了解插件的参数设置以及配置方法，可以参考上文中的示例代码和配置方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fea81e8991b448dd9a7