Fis3的前端工程化之路[三大特性篇之声明依赖]

Fis3版本:v3.4.22

Fis3的三大特性

资源定位：获取任何开发中所使用资源的线上路径

内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中

依赖声明：在一个文本文件内标记对其他资源的依赖关系

声明依赖

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

html声明依赖

实例证明。

目录结构:
Fis3的前端工程化之路[三大特性篇之声明依赖]

D:.
    fis-conf.js
    index.html
    manifest.json

fis-conf.js

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

index.html

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>zqz_test</title>
</head>

<body>
<!--
 @require demo.js
 @require "demo.css"
 -->
    zqz_test
</body>

mainfest.json

__RESOURCE_MAP__

然后执行编译:

$  fis3 release -d ./out

编译后的目录结构:

D:.
│  fis-conf.js
│  index.html
│  manifest.json
│
└─out
        index.html
        manifest.json

我们打开manifest.json看看

{
"res": {
"index.html": {
"uri": "/index.html",
"type": "html",
"deps": [
"demo.js",
"demo.css"
]
}
},
"pkg": {}
}

类型，依赖一目了然。

css声明依赖

在上面例子的基础上，我们增加一个demo.css文件。
demo.css

/**
 * demo.css
 * @require reset.css
 */
body{
background-color: red;
}

继续使用fis3 release -d ./out进行编译

查看manifest.json文件

{
"res": {
"demo.css": {
"uri": "/demo.css",
"type": "css",
"deps": [
"reset.css"
]
},
"index.html": {
"uri": "/index.html",
"type": "html",
"deps": [
"demo.js",
"demo.css"
]
}
},
"pkg": {}
}

这里的打包我们可以不需要fis-conf.js中的

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

这样的话我们只会输出css文件的依赖。

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

js声明依赖

现在已经不支持通过关键字@require来处理依赖了。

秒客网