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

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

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

共收到 2 条回复
145

fis非常好用,感谢分享

29062

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

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