進度條

我們在找人喔!進度條徵兼職「WordPress與PHP開發者」

有興趣參加進度條的新專案嗎?進度條誠徵「初階 - 遠端兼職」WordPress與PHP開發者。詳情可參考這個連結(請點我)。

[Ruby on Rails] 08. 拿掉Coffee script 和 turbolinks

Coffee script 與 Turbolinks 並不是必要函式庫,沒必要在新手學習過程中加入另外需要熟練的語法。

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. 拿掉Coffee script 和 turbolinks (所屬課程)


以下正式開始文章


本章節課程是要教您如何移除 Coffee scriptturbolinks 這兩個套件。

至於不使用這兩個套件的原因如下:

 

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 script的gem。因為在Rails的主程式裡面有用到。

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粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊