声明依赖

在html中声明依赖

用户可以在html的注释中声明依赖关系，这些依赖关系最终会被记录到fis编译产出的 map.json 文件中。

在项目的index.html里使用注释声明依赖关系：

<!--
    @require demo.js
    @require "demo.css"
-->

默认情况下，只有js和css文件会输出到map.json表中，如果想将html文件加入表中，需要通过配置 useMap 让HTML文件加入map.json，例如：

//fis-conf.js
fis.config.merge({
    roadmap : {
        path : [
            {
                //所有的html文件
                reg : '**.html',
                //输出到map.json表中
                useMap : true
            }
        ]
    }
});

执行 fis release --dest ./output --md5 命令对项目进行编译，查看output目录下的map.json文件，则可看到：

{
    "res" : {
        "demo.css" : {
            "uri" : "/static/css/demo_7defa41.css",
            "type" : "css"
        },
        "demo.js" : {
            "uri" : "/static/js/demo_33c5143.js",
            "type" : "js",
            "deps" : [ "demo.css" ]
        },
        "index.html" : {
            "uri" : "/index.html",
            "type" : "html",
            "deps" : [ "demo.js", "demo.css" ]
        }
    },
    "pkg" : {}
}

在js中声明依赖

fis支持识别js文件中的 require函数，或者 注释中的@require字段 标记的依赖关系，这些分析处理对 html的script标签内容 同样有效。

//demo.js
/**
 * @require demo.css
 * @require list.js
 */
var $ = require('jquery');

经过编译之后，查看产出的 map.json 文件，可以看到：

{
    "res" : {
        ...
        "demo.js" : {
            "uri" : "/static/js/demo_33c5143.js",
            "type" : "js",
            "deps" : [ "demo.css", "list.js", "jquery" ]
        },
        ...
    },
    "pkg" : {}
}

在css中声明依赖

fis支持识别css文件 注释中的@require字段 标记的依赖关系，这些分析处理对 html的style标签内容 同样有效。

/**
 * demo.css
 * @require reset.css
 */

经过编译之后，查看产出的 map.json 文件，可以看到：

{
    "res" : {
        ...
        "demo.css" : {
            "uri" : "/static/css/demo_7defa41.css",
            "type" : "css",
            "deps" : [ "reset.css" ]
        },
        ...
    },
    "pkg" : {}
}