前端构建工具FIS3
FIS3 的构建主要是通过用户设置,将构建结果输出到指定的目录。
不会修改源码。
构建过程中对资源 URI 进行了替换,替换成了绝对 URL。就是相对路径换成了绝对路径
内置语法
一套前端编译工具,只要3项编译能力,就可以变得非常易用,代码可维护性瞬间提高很多。
- 资源定位
- 内容嵌入
- 依赖声明
资源定位
如图所示:
如何定位开发路径和部署环境:
FIS3 的构建是不会对源码做修改的,而是构建产出到了另外一个目录,并且构建的结果才是用来上线使用的。
上图中的图片logo本身在开发过程中存在于widget目录下,经过资源定位,release到了static目录下的img目录,对于资源的引用并不会出错,也有利于开发人员使用相对路径开发。
图片命名后的一串数字,是在构建过程中携带的MD5戳。
md5戳是唯一标识一个文件的“文件指纹”,url后也带相应的md5戳
内容嵌入
内容嵌入即嵌入资源
提供诸如图片base64嵌入到css、js里,前端模板编译到js文件中,将js、css、html拆分成几个文件最后合并到一起的能力
可以有效的减少http请求数,提升工程的可维护性
例如:
源码:
<img title="百度logo" src="images/logo.gif?__inline"/>
编译后:
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
声明依赖
声明依赖能力为工程师提供了声明依赖关系的编译接口
在html中声明依赖
用户可以在html的注释中声明依赖关系,这些依赖关系最终会被记录下来,当某个文件中包含字符 RESOURCE_MAP 那么这个记录会被字符串化后替换 RESOURCE_MAP。为了方便描述呈现,我们假定项目根目录下有个文件 manifest.json包含此字符,编译后会把表结构替换到这个文件中。
目录规范
源码目录规范
.
├── page
│ └── index.html
├── static
│ └── lib
├── test
└── widget
├── header
├── nav
└── ui
- page 放置页面模板
- widget 一切组件,包括模板、css、js、图片以及其他前端资源
- test 一些测试数据、用例
- static 放一些组件公用的静态资源
- static/lib 放置一些公共库,例如 jquery, zepto, lazyload 等
编译产出时
产出结果目录:
.
├── static
├── template
└── test
- static 所有的静态资源都放到这个目录下
- template 所有的模板都放到这个目录下
- test 还是一些测试数据、用例
源码目录规范的指定是为了我们好维护,其产出目录规范是为了我们容易部署