开源一个小 gem，帮助更好的集成 fis3 和 rails

之前公司的前端 js、css 都挺乱的，最近随着前端架构师的加入，开始梳理前端工程。由于 asset pipeline 本身的一些限制（主要是无法做到 js 的模块化加载），比来比去，我们选择了 fis 的前端编译方案 http://fis.baidu.com，好处主要有两个：

1. 前端 js 模块化开发，js 模块可以动态 require、按需加载；
2. 就近原则封装组件，可以把同一个组件的 js、css、模板文件放在同一个子目录。

引入 FIS 之后，如何跟 rails 集成呢，我们也试了好几种方案：

1. 由 fis 来编译 js、css 以及 .html.erb 文件，然后把编译好的文件再被 layout 引用。

   简单描述起来还不太好说明白，因为要给每个资源打上动态的 hash 串，所以这种方案中，把 html 也给编译了；然后让 rails 再去 render 这个 html。整个流程比较复杂，难以理解和维护。

2. 由 fis 来编译 js、css 文件。然后生成 map.json 文件，rails 读取 map.json 文件解析之后，由 helper 来解析地址。

   这个方案的好处是理解容易，前后端不需要互相影响开发。

这个方案其实也是 asset pipeline 的基本原理，也是 webpack-rails 的基本原理。现在社区很少有把 fis 和 rails 结合起来用的团队，所以我们开发了一个小 gem 来完成这个功能：

https://github.com/fishtrip/fis3-rails

基本上这个 gem 就做两件事：

1. 解析 map.json 文件，存储资源文件路径和编译后的地址；
2. 由 helper 来根据资源文件名来 render 出正确的资源；

但是，主要注意的是，因为 FIS 中 javascript 文件是可以引用一个 css 文件的，所以我们又写了一个 helper 解决这样的问题（这一点类似 webpack）。

所以 fis3-rails 一共提供了三个 helper：

1. 调用某个 fis js 资源时调用 fis3_javascript_tag，如：

   <%= fis3_javascript_tag('js/mobile/base') %>
   

2. 调用某个 fis css 资源时调用 fis3_stylesheet_tag，如：

   <%= fis3_stylesheet_tag('css/mobile/base') %>
   

3. 因为 fis 中的 js 文件也可能导致 css 产生，所以使用 js 时也需要同时调用 fis3_stylesheet_tag_by_js，如：

   <%= fis3_stylesheet_tag_by_js('js/mobile/base') %>
   

时间仓促，也是简单实现，但是目前大鱼的线上已经开始在使用了，目前来看，还比较稳定。

如果有 rails 团队想引入 fis3，欢迎各位交流和指教~