【Heroku】使用 Browserify-Rails

Rails 的 asset pipeline 很方便,方便到覺得自己有點廢,所以前些日子結束在 Rails 上的專案後,跑去用玩 gulp 來試試看自己把這些檔案綁在一起。
但在接觸了 CommonJS 後,很喜歡把片段包成 module 的方式來做,維護起來方便很多,在 Rails 上用不到 webpack,就單純的來用用 Browserify 吧。

安裝 Browserify-Rails

安裝的部份可以直接參考Github上的去安裝,Browserify-Railspackage.json 裡面有設定了 enginesdevDependencies ,前者是為了 deploy 到 server 上時可以參考的 node 的版本,後者則是設定在 development 的開發環境,但如果只做這兩個設定,可能會在 delopy 到 heroku 時發生 error ,下面我將會探討幾個我遇到的問題和解法。

1. config.assets.debug = false

在 Rails 中,我們可以透過 config/environmentsdevelopment.rbproduction.rb 來設定 asset pipeline 是不是會把所有資源打包起來,development 預設是true,production則是 false

問題: deploy 到 production 的環境時,console 卻會給你報錯?

A: 不要把 CommonJS 的進入點(Entry Point)檔案和 Rails 的asset pipeline綁一起,如果我的 application.js 原先是:

//= require jquery

//= require jquery_ujs

//

//= require turbolinks

//= require_tree .

require_tree . 拿掉,讓他不會爬整個 assets/javascript 裡面的檔案,壞處就是你之後要用到裡面就要自己手動 require,然後到我們的 layout 去單獨載入你的 Entry Point File,假設我的Entry Point File是 app.js ,那麼改成:

<!DOCTYPE html>
<html ng-app="houseApp">
<head>
  <title>LiveHouseinTest</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'app.js' %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= yield %>
</body>
</html>

單獨去載入 app.js ,不要讓他跟著 asset pipeline 被打包起來,做到這邊後,你會發現 console 說他找不到 app.js,這時還必須增加設定,到 config/initializers/assets.rb 裡面新增

# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.

Rails.application.config.assets.precompile += %w( app.js )

這樣就大功告成拉~~~不管你是在 development 還是 production 都不會 error 了,至於問題的原因,應該是 asset pipeline 原先就有用到 CommonJS 的原理,兩個包起來就 error 了,但單獨載入就不會有問題(單純推測,如果你知道原因跟我說,感謝你!!!)

2. rake assets:precompile

當你都寫的沒問題,deploy 到 heroku 上時,當heroku在跑rake assets:precompile,他會跟你說找不到 Browserify 的檔案,這問題有2個單純的解法:

  1. 連同 node_module 一起 deploy

    我是覺得這個方法挺笨的,如果裡面檔案超肥不就GG了.....所以不建議。

  2. 預先 rake assets:precompile

    這個我自己也不喜歡,因為你在做 git 的時候會一堆檔案,每次 deploy 前都要 run ,看起來就是髒髒的,不建議。

我則是採取直接在 heroku 上安裝 node ,這裡就要參考heroku-buildpack-multi,另外附上教學,依照他的設定完成後,一起 deploy 上去,應該就可以啦~~~
但是記得,在 package.json 底下,dependenciesdevDependencies都要加入,這樣你在 local 或上 server 才都可以正常,如下:

{
  "devDependencies": {
    "browserify": "^9.0.3",
    "browserify-incremental": "^1.5.0"
  },
  "dependencies": {
    "browserify": "^9.0.3",
    "browserify-incremental": "^1.5.0"
  },
  "engines": {
    "node": ">= 0.10"
  }
}

Comments

comments powered by Disqus