By

前言

通过脚本标注，声明资源的关系，方便后期打包，界面优化。

在html中声明依赖

1
2
3
4

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

在js中声明依赖

1
2
3
4

/**
 * @require demo.css
 * @require list.js
 */

在css中声明依赖

1
2
3
4

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

创建一个
1

manifest.json
文件

1

__RESOURCE_MAP__


1

__RESOURCE_MAP__
字符串会被替换成
1

依赖关系
的json字符串

配置 
1

fis-conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

fis.match('*.{js,css}', {
    useHash: true
})

fis.match('**.js', {
    release : '/static/js/$0'
});
fis.match('**.css', {
    release : '/static/css/$0'
});

fis.match('*.html', {
    useMap: true
})

默认依赖支持 

1

js
1

css
 格式，如果加入 
1

html
 ， 需要设置 useMap = true 的属性

运行 fis3 release

查看 manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
    "res": {
        "demo.css": {
            "uri": "/static/css/demo_f1190ba.css",
            "type": "css",
            "deps": [
                "reset.css"
            ]
        },
        "demo.html": {
            "uri": "/demo.html",
            "type": "html",
            "deps": [
                "demo.js",
                "demo.css"
            ]
        },
        "demo.js": {
            "uri": "/static/js/demo_e793ab4.js",
            "type": "js",
            "deps": [
                "demo.css",
                "list.js"
            ]
        }
    },
    "pkg": {}
}

res 是我们的资源 deps 就是我们要的依赖关系了

代码

https://github.com/hans007/JavaScriptCodes/tree/master/fis3/require

我的博客