FIS 插件开发
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
当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
欢迎关注公众号【入门游戏开发】
近期评论