插件扩展点列表

张云龙 edited this page Apr 18, 2014 · 5 revisions

fis的编译过程可以分为两个阶段: 单文件编译打包。处理流程如下图

编译流程

fis编译系统具有一个既简单又容易扩展的插件体系,它是fis编译系统生命力的源泉。在了解插件机制之前,你可能需要了解一下fis的 运行原理,使用插件的说明请阅读 插件调用机制

fis在不做任何定制的情况下即可满足前端开发的基本需求,于此同时,系统也具有极强的可扩展性,fis的两大编译流程一共提供了10项扩展点,再加上命令行扩展能力,fis系统一共具有 11项扩展点

单文件编译扩展

fis的单文件编译过程有6项扩展点

parser(编译器插件)

  • 命名规则:fis-parser-xxx

  • 功能职责:将文件编译成标准js、css或者html语言

  • 使用示例:

    //fis-conf.js
    fis.config.merge({
        modules : {
            parser : {
                //coffee后缀的文件使用fis-parser-coffee-script插件编译
                coffee : 'coffee-script',
                //less后缀的文件使用fis-parser-less插件编译
                //处理器支持数组,或者逗号分隔的字符串配置
                less : ['less'],
                //md后缀的文件使用fis-parser-marked插件编译
                md : 'marked'
            }
        },
        roadmap : {
            ext : {
                //less后缀的文件将输出为css后缀
                //并且在parser之后的其他处理流程中被当做css文件处理
                less : 'css',
                //coffee后缀的文件将输出为js文件
                //并且在parser之后的其他处理流程中被当做js文件处理
                coffee : 'js',
                //md后缀的文件将输出为html文件
                //并且在parser之后的其他处理流程中被当做html文件处理
                md : 'html'
            }
        }
    });
  • 插件配置:

    //fis-conf.js
    fis.config.merge({
        settings : {
            parser : {
                //此处的配置数据将在fis调度fis-parser-coffee-script插件时传递给插件的入口函数接收。
                'coffee-script' : {}
            }
        }
    });
  • 示例插件:

preprocessor(标准预处理器插件)

  • 命名规则:fis-preprocessor-xxx

  • 功能职责:在标准化处理之前进行预处理

  • 使用示例:

    //fis-conf.js
    fis.config.merge({
        modules : {
            preprocessor : {
                //css后缀文件会经过fis-preprocessor-image-set插件的预处理
                css : 'image-set'
            }
        }
    });
  • 插件配置:

    //fis-conf.js
    fis.config.merge({
        settings : {
            preprocessor : {
                //此处的配置数据将在fis调度fis-preprocessor-image-set插件时传递给插件的入口函数接收。
                'image-set' : {}
            }
        }
    });
  • 示例插件:

    • fis-preprocessor-image-set:如果css中使用的背景图比如a.png,旁边有一个a_2x.png文件,则将图片的背景设置为- webkit-image-set形式。此功能为retina屏适配项目开发。

postprocessor(标准后处理器插件)

  • 命名规则:fis-postprocessor-xxx
  • 功能职责:在fis对js、css和类html文件进行语言能力扩展之后调用的插件,该阶段可获取到文件的requires等信息。
  • 示例插件:

lint(校验器插件)

  • 命名规则:fis-lint-xxx
  • 功能职责:用于对代码进行校验,执行fis release命令时添加 --lint参数会调用该类型插件。
  • 示例插件: 暂无

test(自动测试插件)

  • 命名规则:fis-test-xxx
  • 功能职责:用于对代码进行测试,执行fis release命令时添加 --test参数会调用该类型插件。
  • 示例插件: 暂无

optimizer(代码优化器插件)

  • 命名规则:fis-optimizer-xxx
  • 功能职责:代码优化插件,用于对代码进行压缩等优化,执行fis release命令时添加 --optimize参数会调用该类型插件。
  • 示例插件:

打包扩展

fis的打包流程有4项扩展点:

prepackager(打包预处理器插件)

  • 命名规则:fis-prepackager-xxx
  • 功能职责:用于对要打包的文件进行预处理。
  • 示例插件: 暂无

packager(打包处理器插件)

  • 命名规则:fis-packager-xxx
  • 功能职责:用于对要打包的文件进行处理,fis内置的处理逻辑是收集依赖关系,生成map.json文件,执行fis release命令时添加 --pack 参数会调用该类型插件。
  • 注意事项:fis内置的packager插件即是 收集、生成map.json的过程,除非你有非常好的打包策略,否则请不要随意扩展这个接口。
  • 示例插件:

spriter(sprite处理器插件)

  • 命名规则:fis-spriter-xxx
  • 功能职责:用于要发布的文件进行css sprite处理。
  • 示例插件: 暂无

postpackager(打包后处理器插件)

  • 命名规则:fis-postpackager-xxx
  • 功能职责:用于要发布的文件进行打包后处理。
  • 示例插件: 暂无

命令行扩展

fis还提供了扩展命令行命令的方式,fis内置了3条命令:fis release,fis server,fis install。如果还嫌这些不够,用户可以自行扩展。

command(命令行插件)

  • 命名规则:fis-command-xxx
  • 功能职责:对fis的命令行进行扩展。
  • 示例插件:
    • fis-command-release:fis release命令的提供者,处理编译过程,并提供文件监听、自动上传等功能
    • fis-command-install:fis install命令的提供者,用于从fis仓库下载组件、配置、框架、素材等资源
    • fis-command-server:fis server命令的提供者,用于开启一个本地php-cgi服务器,对项目进行预览、调试。