当前位置: 首页 > 文档资料 > FIS3 中文文档 >

声明依赖

优质
小牛编辑
132浏览
2023-12-01

声明依赖

声明依赖能力为工程师提供了声明依赖关系的编译接口。

FIS3 在执行编译的过程中,会扫描这些编译标记,从而建立一张 静态资源关系表,资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系资源打包 等信息。使用 FIS3 作为编译工具的项目,可以将这张表提交给后端或者前端框架去运行时,根据组件使用情况来 按需加载资源或者资源所在的包,从而提升前端页面运行性能。

在html中声明依赖

用户可以在html的注释中声明依赖关系,这些依赖关系最终会被记录下来,当某个文件中包含字符 __RESOURCE_MAP__ 那么这个记录会被字符串化后替换 __RESOURCE_MAP__。为了方便描述呈现,我们假定项目根目录下有个文件 manifest.json包含此字符,编译后会把表结构替换到这个文件中。

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

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

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

//fis-conf.js
fis.match('*.html', {
    useMap: true
})

配置以下内容到配置文件进行编译

// fis-conf.js
fis.match('*.html', {
    useMap: true
});

fis.match('*.{js,css}', {
    // 开启 hash
    useHash: true
});

查看 output 目录下的 manifest.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字段 标记的依赖关系,这些分析处理对 html的script标签内容 同样有效。

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

经过编译之后,查看产出的 manifest.json 文件,可以看到:

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

注意, require() 不再处理,js 中 require() 留给各种前端模块化方案,假设你选择的是 AMD 那么就得解析,require([])require();如果选用的是 mod.js 那么就得解析 require.async()require(),其他亦然。

在css中声明依赖

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

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

经过编译之后,查看产出的 manifest.json 文件,可以看到:

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

文档内容有误,可提 PR,文档地址: /doc/docs/user-dev/require.md