Ruby on Rails 實戰聖經

使用 Rails 5.0+ 及 Ruby 2.3+

電子書製作中,歡迎留下 E-mail,有消息將會通知您。若您有任何意見、鼓勵或勘誤,也歡迎來信給我。願意贊助支持的話,这是我的支付宝微信 和乙太幣 ETH 地址
0x232b7245EBE02900c21682be1e6Ad4e839751F6a

現代前端工程開發

Atwood’s Law: any application that can be written in JavaScript, will eventually be written in JavaScript. - https://blog.codinghorror.com/the-principle-of-least-power/

現代前端工程開發包括了一系列以 Node.js 工具鍊的前端開發方式,包括 npmWebpack,透過 Webpack 就可以編譯 BabelReactVue.jsAngular 等等。

而 Rails 在 5.1 終於正式支援 YarnWebpack 了,詳情請見 webpacker gem,這在 Rails 4.2+ 也可以安裝。

Webpacker 安裝方式

  • Gemfile 加入 gem 'webpacker', :github => "rails/webpacker"
  • 執行 bin/rails webpacker:install 安裝
  • 在 layout 中插入 <%= javascript_pack_tag 'app' %> 的話,就會載入 app/javascripts/packs/app.js 作為進入點
  • 需要執行 ./bin/webpack-dev-server 啟動 webpack 即時編譯伺服器,才會在開發時即時編譯。
  • 可用 bin/yarn add XXXX 安裝 javascript 套件,他的 package.json 在根目錄下。

正式部署請執行 rails webpacker:compile 就會產生 digesting 檔名編譯至 public/packs 目錄下。

補充:Vue.js 簡易安裝方式(無須 Webpack)

相比 React.js 或 Angular 需要編譯,Vue.js 如果沒有用到單組件功能,可以不需要 Webpack 編譯,可用以下方式安裝進 Asset Pipeline。

下載 Vue.js 程式,放在 /vendor/javascripts/ 下,然後在 app/assets/javascripts/application.js 載入即可。

Vue.js 有提供 Developmemt 和 Production 版本,前者有額外的開發錯誤提示,建議可以兩個版本都下載放在 ` /vendor/assets/javascripts/ 下,然後將 application.js 改成 application.js.erb,透過判斷 Rails.env` 來決定載入哪一個版本,請參考 設定範例

另外還可以安裝 Chrome 外掛 Vue.js devtools

》回到頁首