by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2015/01/develop-fis-plugins/

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

编译阶段
  • parser
  • preprocessor
  • postprocessor
  • lint
  • test
打包阶段
  • prepackager
  • packager
  • spriter
  • postpackager

具体的构建流程,亲,看这里,插件也是作为一个npm包,寻址地址很简单,很npm一样利用fis.require函数来加载。当我们在fis系统中加载一个插件的时候,会利用 nodejs的require向上查找机制 从 fis-kernel 模块出发,向上查找所需模块。安装插件有三种方法,戳这里,官网文档比较全面,当然你自己开发的插件还不想发布出去,也没必要这么做,下面就从如何写一个插件说起。
fis的源码目录
FIS 插件开发
内核是fis-kernel,核心的代码都在这里面,其他大部分都是插件了。在node_modules下新建一个文件fis-packager-pack,当然从字面意思上讲,这将是一个打包阶段的插件,命名的格式必须符合规范,否则会找不到插件。
在你新建的目录下新增两个文件
FIS 插件开发
其实写过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 插件开发
我们的插件名是fis-packager-pack,所以是在package阶段运行的。调用的是fis.util.pipe方法,文件流处理。
FIS 插件开发
这段代码也很明了,解析插件的名称,调用fis.require把插件加载进来做为当前的processor,如果是函数(对应我们上面插件定义的匿名函数)则执行回调函数cb。注意,在函数的开始,是去fis的配置文件中获取插件的初始化信息,如果这里没有查到,插件是不会被调用的。所以在fis-conf.js配置文件加入下面这一句:

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

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

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

processor(content, file, settings);

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

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2015/01/develop-fis-plugins/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号