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

zamia · 2016年01月20日 · 最后由 huyansheng3-github 回复于 2016年10月25日 · 2103 次阅读

开源一个小 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,欢迎各位交流和指教~

fis 非常好用,感谢分享

赞,看明白三个 helper 的作用了

需要 登录 后方可回复, 如果你还没有账号请 注册新账号