[Ruby on Rails] 08. 拿掉Coffee script 和 turbolinks
Coffee script 與 Turbolinks 並不是必要函式庫,沒必要在新手學習過程中加入另外需要熟練的語法。
此文章也有影片介紹,可以搭配影片一起學習!
本章節課程是要教您如何移除 Coffee script 和 turbolinks 這兩個套件。
至於不使用這兩個套件的原因如下:
Coffee script:
Coffee script 與 JavaScript 的語法是不相容的,沒必要在新手過程中加入另外一個需要熟練的語法。
Turbolinks:
此套件會影響瀏覽器與JavaScript的行為,對於連JavaScript都不熟練的人只會製造困惑而已。
此外這兩個架構與現在流行的JS 三大框架 (ReactJS、AngularJS、VueJS) 都不相容(至少語法不同)。建議未來案子碰到再自行學習即可。
在此章節影片範例中,因為已經在終端機輸入過 rails g controller home 產生名稱叫 home 的 controller 及在 views 裡產生 home 頁面的資料夾與其他的檔案。
其中需要注意的是,因為有安裝 Coffee script 的關係,因此會產出 home.coffee 的檔案,他會被放在app/assets/javascripts/ 。我們的目的就是讓這邊不會產生出coffee檔案,嘗試在Gemfile裡面移除Coffee Script。
coffee-rails
coffee-script
這兩個GEM,但是我們至少可以讓我們可以控制的部分不去使用它們。
步驟一:
請至 Gemfile 資料夾,移除 Coffee script 和 turbolinks 這兩個套件。
(當然你也可以用註解的方式)
接著在終端機輸入 bundle install。
步驟二:
在終端機輸入 rails d controller home,移除掉 controller 所產生的相關檔案。當然如果你如果已經有在這些檔案裡面寫不能刪掉的程式的話,請不要全刪,刪掉coffee檔就好了。這邊全刪的原因是因為我在示範新手課程,理論上裡面是空的。
如果這時候我們重新輸入 rails g controller home,會產生下列檔案,此時可以看見產生出來的檔案為 .js 檔案,就沒有 .coffee 檔案。因為我們已經移除掉Coffee script 了。
(如果單純只是想要產生.js 檔其實還有其他方式(寫在最下面),但是因為我就不想用它,所以直接移除吧!)(寫程式沒有什麼是絕對的,就算 DHH(Rails 作者)現在(Rails 5)還是很愛這兩個套件,但非Rails圈其實沒什麼人用。)
步驟三:
整個頁面執行一次才能確定到底有沒有問題。
在 home_controller.rb,新增/定義一個 index 的方法。
接下來於views/home 新增一個 index.html.erb 頁面。
步驟四:
此時要注意的是,rails server 重新開啟並更新頁面時,會出現以下錯誤。
因為rails 會暫存 coffee 檔案,因為找不到處理coffee檔案的coffee_script gem,所以跳出此錯誤訊息。
解決方法,請在終端機輸入 rake tmp:cache:clear,清除掉暫存的 .coffee 檔案
步驟五:
接下來我們要處理turbolinks。
至 javascripts 資料夾,進入application.js。移除 //= require turbolinks
完整路徑為 app/assets/javascripts/application.js
步驟六:
請至 layouts 資料夾的 application.html.erb 檔案,移除掉有關 turbolinks 的相關程式碼。
此為修改前
此為修改後
最後,記得要儲存檔案。
並且再次於終端機輸入 rake tmp:cache:clear 清除掉暫存的檔案。
步驟七:
重新開啟 server,請在終端機輸入 rails s。
如果畫面可以顯示,沒有跳出任何錯誤訊息,基本上這樣就沒有問題了。
補充說明:
在 rails 套件裡,會有一些套件是互相起作用的,如果真的移除掉 gem 'coffee-rails' 套件,剛好我們所使用的其他套件,又需要跟它做配合的話,也會造成系統錯誤。
追根究底而言,我們的目的是希望 controller 所產生的是 .js 而不是 .coffee 檔案,哪如何不移除 gem 'coffee-rails' 套件,所產生的檔案都是 .js 檔案呢? 解決辦法如下。
請至路徑 config/environment.rb,輸入以上程式碼,目的是強迫 controller 所產生的檔案都是 .js
最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!