FIS —— 百度开源的前端集成解决方案

FIS是百度开源的前端集成解决方案，这是团队和百度众多产品线共同探索出一套前端集成解决方案。解决了前端生成中前端静态资源加载优化、页面运行性能优化、基础编译工具、运行环境模拟、js|css组件化开发等心问题。

F.I.S简介

首先让我们来看一个真正的前端团队要开发一个产品时所需要经历的过程：

• 第一阶段：规范与设计

• • 定制必要的开发规范
  • 定制项目的组件化拆分方案

• 第二阶段：技术选型

• • 选择前端组件化框架（seajs, requirejs, ...）
  • 选择前端基础库（jquery, tangram, ...）
  • 选择模板语言（php, smarty, ...）
  • 选择模板插件（xss修复）

• 第三阶段：自动化与拆分

• • 选择或开发自动化工具（打包，压缩，校验）
  • 将系统拆分为几个子系统，以便大团队并行开发
  • 适当调整框架以适应工具产出

• 第四阶段：性能优化

• • 小心剔除已下线的功能
  • 优化http请求
  • 适当调整自动化工具以适应性能优化
  • 使用架构级优化方案：BigPipe、BigRender等

以上阶段，是所有大型应用前端团队都会经历的阶段，我们将 其中的技术需求总结为前端集成解决方案。

通常，一套完整的前端技术解决方案包括四个方向：

• 前端框架：提供组件加载及管理框架支持，提供前端基础库及组件库。
• 模板框架：提供组件化开发模式支持；配合前端框架收集页面所需要的最小静态资源需求；留有充分的性能优化空间，性能优化对工程师透明。
• 自动化工具：提供基本优化能力；为前端框架、模板框架提供辅助支持。
• 辅助开发工具：提升工程师的开发体验，降低调试、部署成本。

so，如果你的团队已经拥有以上四项技术基础，那么恭喜你，你已拥有了一套fis。

这样的过程每天都在前端界上演，那么，有没有办法让这个过程简化，让前端团队可以快速进入角色，而且不用担心未来的自动化、性能优化等问题呢？ 答案是肯定的！

F.I.S@百度

2011年底，百度web前端研发部成立F.I.S团队，汇集了来自各产品线的精英工程师，该团队的任务是寻找提升前端工业生产力水平的解决方案。经过1.5561643836年的努力，fis团队和百度众多产品线共同探索出一套前端集成解决方案，解决了前端生成中遇到的诸多问题，包括但不限于 前端静态资源加载优化、页面运行性能优化、基础编译工具、运行环境模拟、js|css组件化开发 等前端领域核心问题。如今，fis团队的解决方案已应用到百度30多个产品线，覆盖了从pc到无线终端的应用，极大的提升了前端团队的生产力，降低了开发成本。

2013年初，fis团队总结了之前在前端集成解决方案领域所做的探索，将整套方案整理开源，希望能为前端工业化提供新的思路。

功能概述

• 跨平台支持win、mac、linux等系统
• 无内置规范，可配置 开发和部署规范 ，用于满足任何前后端框架的部署需求
• 对html、js、css实现 三种语言能力 扩展，解决绝大多数前端构建问题
• 支持二次包装，比如 spmx 、 phiz chassis ，对fis进行包装后可内置新的插件、配置，从而打造属于你们团队的自己的开发工具
• 自动生成静态资源表关系表（map.json），可用于 连接前后端开发框架
• 所有静态资源自动加

  md5版本戳

  ，服务端可放心开启永久强缓存
• 支持给所有静态资源添加域名前缀
• 可灵活扩展的插件系统，支持对构建过程和命令功能进行扩展，现已发布N多 插件
• 通过插件配置可以在一个项目中无缝使用 less coffee markdown jade 等语言开发
• 内置 css sprites插件 ，简单易用
• png图片压缩插件 ，采用c++编写的node扩展，具有极高的性能，支持 将png24压缩为png8
• 内置本地开发调试服务器，支持完美运行

  java

  jsp

  php

  等服务端语言
• 支持文件监听，保存即发布
• 支持浏览器自动刷新，可同时刷新多个终端中的页面，配合文件监听功能可实现保存即刷新
• 支持上传到远端服务器，配合文件监听，浏览器自动刷新功能，可实现保存即增量编译上传，上传后即刷新的开发体验
• 超低学习成本，只须记忆

  2

  条命令即可完成开发
• 抹平编码差异，开发中无论是gbk、gb2312、utf8、utf8-bom等编码的文件，输出时都能统一指定为utf8无bom（默认）或者gbk文件

快速上手

• 安装

• • npm install -g fis

• 三条命令，满足你的所有开发需求：

• • fis install <name>
  • fis release [options]
  • fis server <command> [options]

• 试手样例

• • 纯前端组件化方案
  • fis官网

三种语言能力扩展

• 关于三种语言能力
• 在html中： 定位资源 嵌入资源 声明依赖
• 在js中：
• 在css中：

插件系统

• 编译过程运行原理
• 插件调用机制
• 插件扩展点列表

配置文档

• 零配置
• 使用配置文件
• 系统配置

• • project.charset
  • project.md5Length
  • project.md5Connector
  • project.include
  • project.exclude
  • project.fileType.text
  • project.fileType.image

• 插件配置

• • modules.parser
  • modules.preprocessor
  • modules.postprocessor
  • modules.lint
  • modules.test
  • modules.optimizer
  • modules.prepackager
  • modules.packager
  • modules.spriter
  • modules.postpackager
  • settings

• 内置插件运行配置

• • settings.postprocessor.jswrapper
  • settings.optimizer.uglify-js
  • settings.optimizer.clean-css
  • settings.optimizer.png-compressor
  • settings.spriter.csssprites

• 目录规范与域名配置

• • roadmap.path
  • roadmap.ext
  • roadmap.domain
  • roadmap.domain.image

• 部署配置

• • deploy

• 打包配置

• • pack

高级使用

• 基于map.json的前后端架构设计指导

更多资料

• fistool 可视化界面工具
• gois go语言组件化解决方案
• PHP组件化解决方案
• 通过包装fis得到适应seajs架构的集成解决方案
• sublime plugin 支持FIS编译的sublime插件，可以替代watch功能