深度解析FIS插件机制，打造专属定制化编译方案

2023-12-03 14:35:05

# FIS 插件机制






FIS作为一款前端构建工具，其插件机制为用户提供了高度的灵活性，能够轻松扩展和自定义编译流程。了解FIS插件机制，不仅可以帮助我们更好地使用FIS，还可以为我们开发自己的前端构建工具提供灵感。

**FIS编译流程** 

FIS的编译过程可以分为两个阶段：**单文件编译** 和**打包** 。处理流程如下图，图片来自FIS官网：

 [client] - request -> [node server] 
          ^            | 
          |            v
      parser(编译器)    模块合并
          ^            |
          |            v
      文件优化      文件打包
          ^            |
          |            v
      [client] <- response


**单文件编译** 

在单文件编译阶段，FIS会首先使用parser(编译器)将其他语言编译为标准js、css，比如将less、coffee等预处理语言编译成标准的css、js。

**打包** 

在打包阶段，FIS会将编译后的文件进行模块合并、文件优化和文件打包。

**FIS插件机制** 

FIS的插件机制允许用户在编译过程中插入自己的代码，从而实现对编译过程的定制。FIS插件可以分为两类：**编译器插件** 和**优化器插件** 。

**编译器插件** 

编译器插件用于在单文件编译阶段对文件进行处理，比如less、coffee等预处理语言的编译器插件。

**优化器插件** 

优化器插件用于在打包阶段对文件进行优化，比如js压缩、css压缩等优化器插件。

**如何自定义一个FIS插件** 

自定义一个FIS插件需要遵循以下步骤：

1. 首先，我们需要创建一个插件文件，文件名为plugin.js，放在plugins目录下。
2. 在插件文件中，我们需要定义一个FIS的插件对象，这个对象至少需要包含两个属性：

    * **name** ：插件的名称。
    * **dependencies** ：插件的依赖项，是一个数组，里面包含了其他插件的名称。
    * **init** ：插件的初始化函数。

3. 在init函数中，我们可以编写自己的代码来处理文件。

4. 最后，我们需要在fis-conf.js文件中注册我们的插件。

**示例** 

以下是一个简单的FIS插件示例，该插件可以将所有css文件中的颜色值替换为红色：

```javascript
// plugin.js
fis.plugin('replace-color', {
  name: 'replace-color',
  dependencies: [],
  init: function () {
    fis.match('*.css', {
      postpackager: function (ret) {
        ret.content = ret.content.replace(/#([0-9a-f]{3,6})/gi, '#ff0000');
      }
    });
  }
});

// fis-conf.js
fis.usePlugin('replace-color');