声明依赖
声明依赖
声明依赖能力为工程师提供了声明依赖关系的编译接口。
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