fis3 使用心得

fis3使用心得

因为项目原因，公司的框架选择是fis3,因此我就接触了下fis3这个东西。楼主没用过webpack,gulp和grunt也不熟，fis3做为自己第一个使用的打包工具，感觉真tm好用。本文主要就介绍一下对于fis3的使用心得（非常非常浅显，仅限于个人粗浅理解，偏近应用。入门可以，深入不一定好）

啥是fis3呢?官方介绍如下：

解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题
1.常用的参数

参数名	意义	哪一步
-p	启服务的端口号	fis3启服务时
-w	监听	比如release时监听更改
-d	声明发布路径名	发布到当前命令执行目录下
-L	浏览器自动刷新	一般-wL这样使用

它还可以发布到远程测试机那样，局域网里有接收脚本，就可以直接发布。十分方便。

2.思想
大牛研发fis时说，他们多年经验，前端开发需要的编译能力只有三种：资源定位、内容嵌入、依赖声明。fis3里只需要简单的配置，而其配置项都是根据这三种能力来的设计的。
(1) 资源定位比较好理解：就是比如用的资源，生成了一张索引表之类的玩意，去那里面找对应资源,发布的时候很多加md5撮的。所以如果用这个功能，靠js代码去获取定位的资源，容易gg。（它的好处也很明显：定位资源能力，可以有效地分离开发路径与部署路径之间的关系，工程师不再关心资源部署到线上之后去了哪里，变成了什么名字，这些都可以通过配置来指定。）

(2)内容嵌入：
为使用人提供诸如base64嵌入css,js里，前端编译模板编译到js里，将js、css、html合并成一个的能力。这个能有效减少http请求。
同时个人使用经验里，最后编译成一个组件或者页面的js,css，html编译成一个js，也更进符合组件化开发思路。
（用法在html中可以嵌入其他文件内容或者base64编码值，可以在资源定位的基础上，给资源加 ?__inline 参数来标记资源嵌入需求。常见的比如说往文件插入base64,往html中插入js/css/html等等。）

补充说明下关于base64嵌入问题，开发的时候，静态资源是放png还是png,gif仍旧是gif.然后在代码快里引入这个资源，在资源后加上__inline这个标示。其实不加也可以正常跑代码。（就是传统的请求资源那样）加上后，在编译时，会把gif或者png文件转成base64直接插入代码。
那么为什么要多次一举呢？
主要是转成了base64后可以少请求一次资源！请求多个资源的确会影响移动端性能，所以我们可以转base64,利用现在硬件好的优势，base64解码快，来降低网络请求，达到代码优化的目的~

(3)依赖声明
官方给出的解释如下

声明依赖能力为工程师提供了声明依赖关系的编译接口。
FIS3 在执行编译的过程中，会扫描这些编译标记，从而建立一张 静态资源关系表，资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包 等信息。使用 FIS3 作为编译工具的项目，可以将这张表提交给后端或者前端框架去运行时，根据组件使用情况来 按需加载资源或者资源所在的包，从而提升前端页面运行性能。

3.配置
根据我个人理解，整个fis3工程构建就是首先编译你的代码（处理资源定位啊等等问题），然后将你的代码发布到内置的服务器上（若未发布远程rd就是自己调试的机子）。然后你打开发布上去的入口文件（也可以通过配置直接把入口文件定为这一页），点开直接就能用了。这中间涉及的点都可以通过配置文件fis-conf.js来配置。
比如说我用到了es6的语法，这个有可能造成不兼容。我可以在编译时候用babel插件处理这个问题。（举例代码如下）

fis.match('src/**.vue:js', {
     isMod: true,
     rExt: 'js',
     useSameNameRequire: true,
     parser: [
         fis.plugin('babel-6.x', {
             presets: ['es2015-loose', 'react', 'stage-3']
         }),
         fis.plugin('translate-es3ify', null, 'append')
     ]
 });

---

编译问题都在此处解决。
然后就是发布问题，比如发布时加md5撮，再比如发布的地址等等，都是用release关键字。  
暂时就这么多，随着以后使用fis3有更进一步体会我再更新这个。