初探FIS3

前端构建工具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 还是一些测试数据、用例

源码目录规范的指定是为了我们好维护，其产出目录规范是为了我们容易部署