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

时间：2023-02-07 05:26:51

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的配置文件控制，比如添加配置，调整文件发布路径。

相关文章