如何在 rails 6 中使用 webpack
本人對 webpack 接觸機會不多，之前也只有在寫活動專案才會用 rails 5 的版本下安裝 webpack (拿來用 Vue)，然而 rails 6 開始就把 webpack 當作預設工具，讓效能更加提升。
本文將會介紹 webpack 是什麼、為什麼要用、rails 中如何使用 webpack
webpack 是什麼？
Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成最佳化過的程式碼。 <- from wiki
為什麼需要用 webpack?
因為 webpack 有以下優點可以使專案速度更加提升
- 將任何類型的檔案通通打包給 js，讓 ruby 負擔更少。
- 包含任何類型的檔案到 JavaScript
- ES6、SCSS、CSS、Images、JSON、Coffeescript、LESS…等
- 將以上的東西通通打包，轉換成瀏覽器看得懂的語言。
了解了 Webpack 優點後，接著實際在 rails 中使用
1.新增 rails 6 專案
rails new trbweb 你會發現在 console 裡面多了個 yarn 這個東西在幫我們安裝套件，而相關的檔案會放在 node_modules 這個資料夾。 專案裡面該裝什麼東西都寫在 package.json ，然而專案是不會把 node_modules 這個資料夾 commit 上去的，而是會去看 package.json 來安裝對應的套件。
安裝好後，看 application.html.erb 會發現
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>已經被換成
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>正式宣告 js 的部分由 webpack 處理。
2.安裝 foreman
要邊跑 rails 邊執行 webpack 還需要再安裝 foreman 來處理
group :development do
gem 'foreman'
end建立 Profile 檔案在專案中(與 Gemfile 同層)
#Profile
web: bin/rails server -p 3000
webpacker: bin/webpack-dev-server接著只要把以往啟動的指令從 rails s 改成 foreman start 就可以囉!
3. 讓 Webpack 處理 css
其實 webpack 也可以幫忙處理 css 的，只需要底下步驟就可以了。
-
首先安裝 bootstrap jquery popper.js
yarn add bootstrap jquery popper.js-
接著把 jquery、popper 設定在 environment.js 中
#environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment-
js、css 分類
首先在
app/javascript下分別建立stylesheets、js資料夾，建立成功後會跟下面結構一樣。
javascript
- js
- channels
- packs
- stylesheets-
require
光是這樣還不夠，還需要在
packs/application.js中， requirestylesheets、js兩個資料夾
require("stylesheets")
require("js")-
require後預設會找資料夾底下的index檔
#stylesheets/index.scss
@import "~bootstrap/scss/bootstrap";
#index.html.erb
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>如果沒意外就會看到 bootstrap 成功套用拉～
-
命名
此時追求完美的你是不是覺得哪邊怪怪的？ 由於
app/javascript已經不是原本的形狀了，是不是改名成frontend比較合適？ 其實是可以的，改名後只需要修改webpack.yml中的 source_path ， 把app/javascript換成app/frontend就可以囉！
舒服。
總結
該選擇 Sprockets 還是 Webpacker ?
如果專案不大，而且只需要用 js 功能，那就可以不用用到 webpack 。相反的，如果專案大的話可以試著裝上 webpacker ，讓前端的東西都給 webpack 處理，如果你手邊有大型專案的話，慢慢的把 app/assets 都搬來讓 webpack 處理吧！