如上述代码,整个 FIS3 的构建流程大体概括分为三个阶段。

    1. 扫描项目目录拿到文件并初始化出一个文件对象列表
    2. 获取用户设置的 插件,进行打包处理(包括合并图片)

    其中打包处理开了四个扩展点,通过用户配置启用某些插件。

    • prepackager 打包前处理插件扩展点
    • packager 打包插件扩展点,通过此插件收集文件依赖信息、合并信息产出静态资源映射表
    • spriter 图片合并扩展点,如 csssprites

    其中插件扩展点包括:

    • lint:代码校验检查,比较特殊,所以需要 release 命令命令行添加 参数
    • parser:预处理阶段,比如 less、sass、es6、react 前端模板等都在此处预编译处理
    • preprocessor:标准化前处理插件
    • standard:标准化插件,处理

    单文件阶段通过读取文件属性,来执行对应扩展点插件。

    举个例子:

    给后缀是 .es6 的文件配置了一个 parser 属性,属性值是启用了一个叫 的插件,当执行到预处理阶段时,将 es6 编译为 es5,供浏览器执行。

    当一个文件被实例化为一个 File 对象后,包括一些文件基本属性,如 filename、realpath 等等,当这个文件被处理时,FIS3 还会把用户自定义的属性 merge 到文件对象上。

    比如

    这样 a.js 处理的时候就会携带这个属性 。myProp 是一个自定义属性,FIS3 默认内置了一些属性配置,来方便控制一个文件的编译流程,可参考配置属性