FIS 插件开发

当FIS满足不了业务的特殊需求的时候，就需要定制化一些功能，按照官网的说明，可扩展的点有这么几个：

编译阶段

• parser
• preprocessor
• postprocessor
• lint
• test

打包阶段

• prepackager
• packager
• spriter
• postpackager

具体的构建流程，亲，看这里，插件也是作为一个npm包，寻址地址很简单，很npm一样利用fis.require函数来加载。当我们在fis系统中加载一个插件的时候，会利用 nodejs的require向上查找机制 从 fis-kernel 模块出发，向上查找所需模块。安装插件有三种方法，戳这里，官网文档比较全面，当然你自己开发的插件还不想发布出去，也没必要这么做，下面就从如何写一个插件说起。
fis的源码目录

内核是fis-kernel，核心的代码都在这里面，其他大部分都是插件了。在node_modules下新建一个文件fis-packager-pack，当然从字面意思上讲，这将是一个打包阶段的插件，命名的格式必须符合规范，否则会找不到插件。
在你新建的目录下新增两个文件

其实写过npm包的同学应该会知道，这个过程就是一样的，package.json定义了插件的一些原属性。包括插件的入口文件，还有一些其他信息等等，最关键的就是main，指向了同级的文件index.js

{
  "name": "fis-packager-pack",
  "description": "A packager plugin for fis to pack resources.",
  "version": "1.0.9",
  "author": {
    "name": "xxxx",
    "email": "xxxx@xxxx.com"
  },
  "keywords": [
    "fis"
  ],
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "xxxxx"
  }
// more
}

index.js的内容：

module.exports = function(ret, conf, settings, opt) {
    fis.util.map(ret.src, function(subpath, file) {
        if (file.isHtmlLike) {
            var content = file.getContent();
            content += '<!-- build '+ (new Date())+'-->';
            file.setContent(content);
        }
    });
};

在html文件中加入构建的时间，这就是这个插件的作用。来看下这个插件的几个参数。这个文件暴露的接口是一个匿名函数，接受四个参数ret, conf, settings, opt。然后遍历ret.src对象，判断当文件类型是html时，往里面写入一段注释。接下来就是要弄清楚四个参数到底是什么意思。

插件的调用

回到插件调用的地方才能弄清楚，很快就能定位到调用插件的地方：node_modules\fis-kernel\lib\release.js

我们的插件名是fis-packager-pack，所以是在package阶段运行的。调用的是fis.util.pipe方法，文件流处理。

这段代码也很明了，解析插件的名称，调用fis.require把插件加载进来做为当前的processor，如果是函数（对应我们上面插件定义的匿名函数）则执行回调函数cb。注意，在函数的开始，是去fis的配置文件中获取插件的初始化信息，如果这里没有查到，插件是不会被调用的。所以在fis-conf.js配置文件加入下面这一句：

fis.config.set('modules.packager', 'pack');

回过头看看cb函数，执行了插件的接口函数，传入的正是插件接口函数接收的四个参数。
ret是构建后的结果对象

// 插件的配置
// setting 也是和插件相关的配置
// opt 则是命令行输入的命令
var conf = fis.config.get('pack');

调用fis的api在插件内部就能完成相应的任务。fis提供了以下api，具体的函数官方也没有给出详细的文档，只能看源码去分析了，大部分都在fis-kernel这个模块下面。

fis.util
fis.cli
fis.file
fis.config
fis.compile
fis.log

前面讲的这个只是在打包阶段的插件开发，另外几个在打包阶段的方式都一样，那接下来看下打包前的插件是如何运行：
代码位置：fis\node_modules\fis-kernel\lib\compile.js

如上图，单个文件的处理流程就是这样的：parse阶段就是将类js、css编译为正常的js、css代码——编译前期处理——标准编译——编译后期处理——语法检测——单元测试——压缩，没个阶段都能够通过配置文件配置是否处理。这里调用了pipe方法，最终还是回归到了fis.util.pipe这个方法，只不过参数是不同的

processor(content, file, settings);

这里传给插件的三个参数是文件内容，文件，配置，所以处理方式基本差不多。
插件的机制基本讲完了，在业务中开发了一个针对合并文件后的插件，可以点击这里查看。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】