前端自动化构建工具 - FIS3 - 第四节:声明依赖

前言

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

在html中声明依赖

在js中声明依赖

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

在css中声明依赖

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

创建一个manifest.json文件

__RESOURCE_MAP__

__RESOURCE_MAP__ 字符串会被替换成依赖关系的json字符串

配置 fis-conf.js

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
})

默认依赖支持 js css 格式，如果加入 html ， 需要设置 useMap = true 的属性

运行 fis3 release

查看 manifest.json

{
    "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

我的博客