[Ruby on Rails] 08. 拿掉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。

 

 

 

步驟一：
請至 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粉絲團按讚喔!!