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

时间:2023-01-07 08:56:25

Fis3版本:v3.4.22

Fis3的三大特性


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

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

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

资源定位


资源定位的能力让我们不在关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定。而工程师只需要使用相对路径来定位自己的开发资源即可。

html中资源定位


对html中的script、link、style、video、audio、embed等标签的src或href属性进行分析,一旦这些标签的资源定位属性可以命中已存在文件,则把命中文件的url路径替换到属性中,同时可保留原来url中的query查询信息。

img资源定位

<img title="百度logo" src="images/logo.gif"/>

编译后:

<img title="百度logo" src="/images/logo.gif"/>

会转成绝对路径

link资源定位

<link rel="stylesheet" type="text/css" href="demo.css">

编译后:

<link rel="stylesheet" type="text/css" href="/demo.css">

给资源添加虚拟目录

<img title="百度logo" src="images/logo.gif"/>

添加fis-conf.js文件,fis3的命令

fis.match('**.gif', {
//发布到/static/img/xxx目录下
release : '/static/img$0'
});

这里通过release添加了虚拟目录static,编译后

<img title="百度logo" src="/static/img/logo_74e5229.gif"/>

js定位资源


使用编译函数 __uri(path) 来定位资源

var img = __uri('images/logo.gif');

编译后:

var img = '/images/logo_.gif';

css定位资源


识别css文件或 html的style标签内容 中 url(path) 以及 src=path 字段,并将其替换成对应资源的编译后url路径。

.style {
background: url('images/body-bg.png');
}

编译后;

.style {
background: url('/images/body-bg.png');
}

最后


资源定位结果可以被Fis的配置文件控制,比如添加配置,调整文件发布路径。