2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!
Fork me on GitHub

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

Fis3版本:v3.4.22

Fis3的三大特性

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

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

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

声明依赖

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

html声明依赖

实例证明。

目录结构:

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来处理依赖了。

posted on 2017-01-06 21:58  qize  阅读(970)  评论(0)  编辑  收藏  举报

导航