Skip to content
hefangshi edited this page Jul 21, 2014 · 1 revision

在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" : {}
}