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来处理依赖了。
Fis3的前端工程化之路[三大特性篇之声明依赖]的更多相关文章
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
- 用grunt进行前端工程化之路
我们的项目wecash4.0的前端构建考虑过用fis和grunt. 目录: 前期调研:fis vs grunt vs gulp? 一.安装grunt和项目. fis是百度fex研发的构建工具,非常方便 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端学PHP之面向对象系列第三篇——三大特性
× 目录 [1]封装 [2]继承[3]多态 前面的话 php面向对象编程的三大特性是封装性.继承性和多态性.本文将介绍php的这三大特性 封装 封装就是把对象中的成员属性和成员方法加上访问修饰符( p ...
- 百万年薪python之路 -- 面向对象之三大特性
1.面向对象之三大特性 1.1封装 封装:就是把一堆代码和数据,放在一个空间,并且可以使用 对于面向对象的封装来说,其实就是使用构造方法将内容封装到 对象 中,然后通过对象直接或者self间接获取被封 ...
- 前端面试 CSS三大特性
CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...
随机推荐
- iOS---iOS10适配iOS当前所有系统的远程推送
一.iOS推送通知简介 众所周知苹果的推送通知从iOS3开始出现, 每一年都会更新一些新的用法. 譬如iOS7出现的Silent remote notifications(远程静默推送), iOS8出 ...
- Modify Branding of FreeCAD
Modify Branding of FreeCAD eryar@163.com This article describes the Branding of FreeCAD. Branding me ...
- junit4进行单元测试
一.前言 提供服务的时候,为了保证服务的正确性,有时候需要编写测试类验证其正确性和可用性.以前的做法都是自己简单写一个控制层,然后在控制层里调用服务并测试,这样做虽然能够达到测试的目的,但是太不专业了 ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- SHA-1算法
SHA-1.h #ifndef _SHA1_H #define _SHA1_H #include<iostream> using namespace std; //4个函数 #define ...
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- Android程序中--不能改变的事情
有时,开发人员会对应用程序进行更改,当安装为以前版本的更新时出现令人惊讶的结果 - 快捷方式断开,小部件消失或甚至根本无法安装. 应用程序的某些部分在发布后是不可变的,您可以通过理解它们来避免意外. ...
- Xamarin.Android快速入门
一.准备工作 1.创建一个空的解决方案,并命名为Phoneword 2.右击解决方案 新建->新建项目 并命名为Phoneword_Droid 二.界面 1.打开Resources文件夹-> ...
- 当前端也拥有 Server 的能力
今天看了不少文章,比较感兴趣的是 Cache API.它是浏览器 Request/Response 的缓存管理工具,其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch A ...
- 修复IE11首页被恶意篡改的问题
前几天为了测试一个程序,把系统换成了Windows10,Windows10自带了微软的新浏览器Edge和IE11,用来其实也没什么太多感觉了,我习惯于Chrome,但有些东西还是得用IE,比如网银之类 ...