插件开发

插件开发

前置阅读，请详细阅读以下文档，因为这些文档非常重要

注意，FIS 插件不支持异步

按照插件扩展点列表文档的介绍，在整个编译流程可以扩展的点有；

打包阶段

编译阶段，处理的是单个文件，整个过程都使用了缓存； 打包阶段，处理的是编译后的所有文件；

以上扩展点也可以理解为FIS的几类插件，接下来详细说明每一类插件自定制。

开发插件

FIS API

@see 开发插件API

编译阶段插件

插件接口

/**
 * Compile 阶段插件接口
 * @param  {string} content     文件内容
 * @param  {File}   file        fis 的 File 对象
 * @param  {object} settings    插件配置属性
 * @return {string}             处理后的文件内容
 */
module.exports = function (content, file, settings) {
    // 你在此处设置你的逻辑修改文件内容 content，或者文件对象 file
    return content;
};

FIS 的插件是以 NPM 包的形式提供的，这将意味着 fis 的插件都是一个 NPM 包，并且最终也需要发布到 NPM 平台上。为了方便管理，FIS 只能加载 NPM 全局安装的插件，这将意味着你开发的时候需要把你的插件放到 NPM 全局插件目录下。

我们如何知道这个全局插件目录在什么地方呢，一般需要通过在 CMD （Windows） 或者 终端 （类 Unix）执行命令 npm prefix -g 得到一个目录，比如

➜  fis-site git:(master) npm prefix -g
/Users/shouding/Bin

那么这个全局安装的目录就是 /Users/shouding/Bin/lib/node_modules，在命令输出的路径后跟 lib/node_modules插件，这个就是全局安装的目录了。

Windows & 类 Unix 都可以通过软链的方式把你开发插件的目录软链过去。

以下示例插件都放到 NPM 全局安装目录下和平精英外挂网，我们假定这个目录叫

插件目录

/fis--
/fis--/index.js

以parser插件为例，如果使用了less、sass、coffescript等开发维护css和js。在这个阶段就是要把它们解析为标准的css和js。

打包阶段插件

如运行原理，打包阶段是多文件处理的阶段；

插件接口

/**
 * 打包阶段插件接口
 * @param  {Object} ret      一个包含处理后源码的结构
 * @param  {Object} conf     一般不需要关心，自动打包配置文件
 * @param  {Object} settings 插件配置属性
 * @param  {Object} opt      命令行参数
 * @return {undefined}          
 */
module.exports = function (ret, conf, settings, opt) {
    // ret.src 所有的源码，结构是 {'': }
    // ret.ids 所有源码列表，结构是 {'': }
    // ret.map 如果是 spriter、postpackager 这时候已经能得到打包结果了，
    //         可以修改静态资源列表或者其他
}

以prepackager插件为例。prepackager即打包前需要对文件做某些处理，比如想在所有的html注释里面插入编译时间。

当然为了更快速的搞定一些小需求，可以把插件功能直接写到配置文件 fis-conf.js 中；

// vi fis-conf.js
fis.config.set('modules.postprocessor.js', function (content) {
    return content += '\n// build time: ' + Date.now();
});

注意

配置使用插件时，同一个扩展点可以配置多个插件，比如；

// 调用 fis-prepackager-a, fis-prepackager-b ...插件
fis.config.set('modules.prepackager', 'a,b,c,d');
// or
fis.config.set('modules.prepackager', ['a', 'b', 'c', 'd']);
// or
fis.config.set('modules.prepackager', [function () {}, function () {}])

文章来源:https://fex.baidu.com/fis-site/docs/dev/plugin.html