FIS3封装の指南

[jincdream]

为什么选择FIS3?

优点：

• 配置上，FIS3全局安装即可，然后每个项目里面可以再进行单独配置，更适合团队的规范化。
• 资源依赖表，这个是FIS3最核心的功能，基于它能够进行最大化的性能优化

  缺点：

• 插件更新的话比较麻烦，需要重新安装封装后的工具。所以可以考虑插件单独安装，但就缺少了封装性。

  封装流程

  1. 确定功能。
  2. 目录流程规范。
  3. 封装与插件开发。
  4. 合并测试。

     确定功能

• 组件化
• 资源合并加载
• css预编译
• 调试服务器 ...

  组件化

组件：一个组件包括了(html、js、css)，是业务逻辑的最终表现。

组件化的方式可以有两种： 1.纯编译组件化。 2.后端加载组件化。

纯编译组件化

在经过编译之后会输出完整的页面，组件的内容已经被编译进相应的地方了。比如通过node.js渲染vue.js模板或者angular.js模板，然后嵌入进html，并添加相应的js、css依赖。

优点：

• 能够减少后端开发的成本。
• 友好的SEO优化。

坑：

• 资源定位不正确。在FIS3编译的parse阶段进行模板的渲染和嵌入，会导致模板里的静态资源(img等)定位不正确。可以先将模板在parse阶段通过拼装内容嵌入功能，来实现资源定位，然后再在packager段进行模板的渲染并替换之前的模板占位符。
• 跨系统组件引用困难。例如A项目要引用B项目的组件，必须通过依赖表得到正确的文件名（非覆盖式发布）读取文件内容进行编译。这样如果B项目的组件不是最新版本的，那么编译出来的内容就可能有问题。

  后端加载组件化

用后端模板，扩张模板功能，使其能够通过资源依赖表对资源进行加载。

优点：

• 友好的SEO优化。
• 可以准确地进行资源定位。
• 合理的跨项目组件引用。

插件参考：pcat-组件加载、pcat-组件渲染

资源合并加载

合并主要指css、js的合并。

合并可以有两种：

• 打包文件
• 合并combo url

  打包文件

是一种比较普遍的方式，可以有效地减少请求数。但会产生很多冗余文件，时间越久，越难清理。

combo url

需要后端进行配合，可以利用 nginx connect 或者其他类似功能，对文件进行动态合并输出。面向http2，更合理的优化。但各浏览器对url长度均有限制，应该是目前唯一的缺点。

css预编译

• sass编译
• less编译

  sass编译

有官方编译插件。 坑：

• 大部分 windows 家庭版会因为缺少系统依赖库类（.NET 什么的）而安装失败。

  less编译

有官方编译插件。

调试服务器

感觉不太需要一个通用型的调试服务器。

• combo url 。FIS3原来的调试服务器不支持 combo url ，这个需要自己拓展。
• mock data。这个功能其实有点鸡肋，感觉应该搭建个mock系统，支持根据参数进行数据返回。

  目录流程规范

• 开发目录的规范定制
• 部署目录的规范定制
• 部署流程的具体事宜

目录的定制可以参考张云龙的前端开发体系建设日记

关于路径

另外FIS3里面关于路径的配置有三个： release , deploy, domain

• release：相对于deploy文件夹（这里也包括远程文件夹）的产出路径；
• deploy： 可以指定为本机的产出文件夹或者是远程接收端的文件夹；
• domain：顾名思义，就是域名。

http://192.168.x.x/是本地的一个库，可能多个项目都会用到它

文件最后的访问URL应该是 domain + release 的。 domain也是可以写成 http://192.168.x.x/project这种形式的。

控制media 再控制 release , deploy, domain，就可以有各种URL的产出了。弄清楚这三者的关系，就可以随心所欲实现部署路径了。

关于部署

在反复研读过张云龙的大公司里怎样开发和部署前端代码？的讨论后，认定了非覆盖式部署资源。（下面讨论的都是非覆盖式的部署）

需要进行部署的html页面文件也有两种：

• 静态html文件
• 动态html模板文件

  静态html文件

坑：每改动一个引用资源，就需要重新编译和部署一遍静态页面。如果这个资源被所有文件引用，那么所有文件都要进行重新编译和部署。除非用非覆盖式的资源部署，不然不能解决问题。

动态html模板文件

这用类型也能解决静态html文件的部署问题。但是需要扩展出一个给模板用的资源加载函数，使其能够通过资源依赖表加载相应的资源。

按版本部署

如果html文件/模板需要根据自身MD5来进行版本部署的话，会有个坑：

这个坑来自MD5的计算，如果在FIS3的单文件编译阶段后，把一些非依赖文件内容注入进了编译文件，该文件的MD5是不会再重新计算了的。合并打包后的再自动注入资源链接就有问题了。资源的MD5变了，但文件的MD5却没有变。

封装与插件开发

• 主体配置封装
• 插件的开发
  1. FIS3主体配置封装指引
  2. FIS3插件开发指引
  3. FIS3 API 文档

     插件开发tips

• 先熟悉插件开发的指引和API文档，API中提供很多便携的方法可以进行调用。
• 只有发布插件(deploy-编译的最后阶段)是可以用异步，其他插件都必须要同步返回值。FIS3的架构就是同步的，如果要在所有同步流程过程中穿插异步流程，是非常困难和不友好的，期望有天能用y串行起异步来，这样就能用些gulp、grunt等的插件了 。

  合并测试

就是测试。

转载注明作者、出处。

[otarim]

不太喜欢全局的东西，迁移很麻烦