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

Fis3的前端工程化之路[三大特性篇之声明依赖]的更多相关文章

  1. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  2. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  3. python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  4. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  5. 用grunt进行前端工程化之路

    我们的项目wecash4.0的前端构建考虑过用fis和grunt. 目录: 前期调研:fis vs grunt vs gulp? 一.安装grunt和项目. fis是百度fex研发的构建工具,非常方便 ...

  6. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  7. 前端学PHP之面向对象系列第三篇——三大特性

    × 目录 [1]封装 [2]继承[3]多态 前面的话 php面向对象编程的三大特性是封装性.继承性和多态性.本文将介绍php的这三大特性 封装 封装就是把对象中的成员属性和成员方法加上访问修饰符( p ...

  8. 百万年薪python之路 -- 面向对象之三大特性

    1.面向对象之三大特性 1.1封装 封装:就是把一堆代码和数据,放在一个空间,并且可以使用 对于面向对象的封装来说,其实就是使用构造方法将内容封装到 对象 中,然后通过对象直接或者self间接获取被封 ...

  9. 前端面试 CSS三大特性

    CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...

随机推荐

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 使用 JavaScriptService 在.NET Core 里实现DES加密算法

    文章<ASP.NET Core love JavaScript>和<跨平台的 NodeJS 组件解决 .NetCore 不支持 System.Drawing图形功能的若干问题> ...

  4. 微信小程序的机会在于重新理解群组与二维码

    历时一年,唯一一个尚未发布就获得Pony Ma与Allen Zhang站台的产品:微信小程序,将于2017年1月9日正式上线了.我很期待.唯一要警惕的是:防止长考出臭棋. 在上线前夕,我对于如何借助小 ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  7. SharePonit 2010 更改另存为列表模板的语言类型

    从朋友处得来一个列表模板:AccessApplicationSharePoint.stp 将其通过:网站操作----网站设置----列表模板,上传进去.然后去创建列表,发现找不到此模板. 根据多年老司 ...

  8. swift 中关于open ,public ,fileprivate,private ,internal,修饰的说明

    关于 swift 中的open ,public ,fileprivate,private, internal的区别 以下按照修饰关键字的访问约束范围 从约束的限定范围大到小的排序进行说明 open,p ...

  9. FineReport如何部署Tomcat服务器集群

    环境准备 Tomcat服务器集群中需要进行环境准备: Apache:Apache是http服务器,利用其对Tomcat进行负载均衡,这里使用的版本是Apache HTTP Server2.0.64: ...

  10. 运用Mono.Cecil 反射读取.NET程序集元数据

    CLR自带的反射机智和API可以很轻松的读取.NET程序集信息,但是不能对程序集进行修改.CLR提供的是只读的API,但是开源项目Mono.Cecil不仅仅可以读取.NET程序集的元数据,还可以进行修 ...