npm 包 fis3-parser-babeljs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端技术的飞速发展，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 安装

npm install fis3-parser-babeljs --save-dev

在项目根目录的 package.json 文件中添加依赖后执行 npm install

{
  "devDependencies": {
    "fis3-parser-babeljs": "^1.0.0"
  }
}

fis3-parser-babeljs 的使用

在 fis3 中配置

在 fis3 中使用 fis3-parser-babeljs 很简单，只需要在 fis-conf.js 文件中进行配置即可。

下面是一个简单的 fis-conf.js 配置文件，将所有 src 目录下的 .js 文件编译为浏览器可识别的 ES5 语法。

fis.match('src/**.js', {
  parser: fis.plugin('babeljs'),
  rExt: '.js'
});

可以看到，只需要将插件名称传递给 fis.plugin() 方法即可使用插件。需要注意的是，这里的 "babeljs" 是插件的名称，需要保持与安装时指定的名称一致。

插件参数配置

fis3-parser-babeljs 插件支持很多参数配置，在此只介绍部分常用的参数。

presets

presets 参数是用来指定 babel 预设的，它可以是一个字符串数组或一个对象。下面我们以 @babel/preset-env 为例来介绍如何使用 presets。

在项目根目录中执行以下命令安装 @babel/preset-env

npm install @babel/preset-env --save-dev

在 fis-conf.js 中进行设置

-- -------------------- ---- -------
---------------------- -
  ------- --------------------- -
    -------- -
      --------------------- -
        -------- -
          --------- ------ - ---------- --- -- ----
        -
      --
    -
  ---
  ----- -----
---

在上面的配置中，我们将 @babel/preset-env 设为 presets 的第一个元素，并且传递了一个 targets 对象，用于指定浏览器的兼容性。这里我们指定了最近的两个版本以及 IE10 及以上版本。根据我们设置的 targets，babel 会对代码进行相应的转换。

plugins

plugins 参数用于指定 babel 插件，它可以是一个字符串数组或一个对象。

例如，需要使用 @babel/plugin-proposal-decorators 插件

在项目根目录中执行以下命令安装 @babel/plugin-proposal-decorators

npm install @babel/plugin-proposal-decorators --save-dev

在 fis-conf.js 中进行设置

fis.match('src/**.js', {
  parser: fis.plugin('babeljs', {
    plugins: [
      ['@babel/plugin-proposal-decorators', {legacy: true}]
    ]
  }),
  rExt: '.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