跳至主要内容

[Rails] Webpacker

keywords: npm, yarn​

筆記使用版本：rails/webpacker @ 4.0.2

目錄​

[TOC]

安裝​

透過指令​

# Available Rails 5.1+
$ rails new myapp --webpack
$ rails new myapp --webpack=vue
$ rails new myapp --webpack=react

透過 Gemfile​

將 webpacker 加到 Gemfile 當中：

# Gemfile
gem 'webpacker'

接著執行：

$ bundle
$ bundle exec rails webpacker:install

# 執行完上面者指令後，可在執行下面的指令補近 vue 需要的套件
$ bundle exec rails webpacker:install:vue
# $ bundle exec rails webpacker:install:react

或者也可以執行：

$ rails webpacker:install

# 執行完上面者指令後，可在執行下面的指令補近 vue 需要的套件
$ rails webpacker:install:vue

如果沒先執行 webpacker:install 就直接執行 webpacker:install:vue 會出現錯誤 webpacker is installed... ./bin/webpack: not found @ Webpacker Github

錯誤處理​

如果不是透過指令一開始 rails new 時就安裝 webpacker，或者安裝後有其他問題，大絕招就是把所有 webpacker 相關的檔案都砍掉後，再重新執行一次 rails webpacker:install，其中包含：

./
 ├── bin:
 │    ├── webpack
 │    └── webpack-dev-server
 ├── config:
 │    ├── webpack:
 │    └── webpacker.yml
 ├── node_modules:
 ├── .babelrc
 ├── package.json
 └── yarn.lock

刪除完後，在執行一次 rails webpacker:install

使用​

資料結構​

app/javascript:
  ├── packs:
  │   └── application.js
  └── stylesheets:
  │   └── application.css
  └── images:
      └── logo.svg

載入打包檔案​

使用 javascript_pack_tag 和 stylesheet_pack_tag 來載入打包的檔案：

<%# ./app/views/layouts/application.html.erb %>

<!-- 會載入 app/javascript/packs/application.js -->
<%= javascript_pack_tag 'application' %>

<!-- 會載入 app/javascript/packs/application.scss -->
<%= stylesheet_pack_tag 'application' %>

直接載入靜態檔案​

使用 asset_pack_path helper 來載入靜態檔案：

<%# erb %>

<link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" />
<img src="<%= asset_pack_path 'images/logo.svg' %>" />

⚠️ 新版的路徑前面需要加上 media，所以會變成 media/images/logo.svg，參考 CHAGNELOG。

開發​

Webpacker 透過兩支檔案在運行：./bin/webpack 和 ./bind/webpack-dev-server，主要是在原本的 webpack.js 和 webpack-dev-server.js 外包了一層來確認可以根據環境執行。

在開發時，Webpacker 預設會根據需要時（on demand）才編譯而不會預先編譯（upfront），也就是當你透過 Webpacker 的 helper 方法來指稱到任何 pack 中的資源時才會發生，因此你不需要分開的執行獨立的程序。

如果你希望使用 live code reloading 的功能，或者需要時（on demand）時要編譯的檔案很多速度太慢，那麼你可以執行 ./bin/webpack-dev-server 或 ruby ./bi/webpack-dev-server。這會去監控 app/javascript/packs/*.js 裡的檔案，一旦有變更就會自動重新整理瀏覽器。

# webpack dev server
./bin/webpack-dev-server

# watcher
./bin/webpack --watch --colors --progress

# standalone build
./bin/webpack

一旦你啟動 development server，所有向此伺服器發送 webpack asset 的請求都會透過 webpacker 自動代理，一旦停止此 server 則會回覆到 on-demand 的編譯方式。

設定​

設定檔的路徑在：./config/webpacker.yml

更新​

$ bundle update webpacker
$ yarn upgrade @rails/webpacker --latest
$ yarn upgrade webpack-dev-server --latest

其他​

在 Webpacker 中使用 Rails 變數​

# 讓 webpacker 也能吃 .js.erb 的檔案
$ rails webpacker:install:erb

如此即可在 Rails Webpacker 中使用 Rails 的變數

// ./apff/app/javascript/controllers/posts_controller.js.erb
get token() {
  return "<%= Rails.application.credentials.filmcloud_access_token %>";
}

參考​