PJCHENder 未整理筆記

[Rails] Webpacker

2017-10-12

[Rails] Webpacker

@(Ruby on Rails)[rails, gem]

keywords: npm, yarn

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

目錄

[TOC]

安裝

透過指令

1
2
3
4
# Available Rails 5.1+
$ rails new myapp --webpack
$ rails new myapp --webpack=vue
$ rails new myapp --webpack=react

透過 Gemfile

將 webpacker 加到 Gemfile 當中:

1
2
# Gemfile
gem 'webpacker'

接著執行:

1
2
3
4
5
6
$ bundle
$ bundle exec rails webpacker:install

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

或者也可以執行:

1
2
3
4
$ 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,其中包含:

1
2
3
4
5
6
7
8
9
10
11
./
├── bin:
│ ├── webpack
│ └── webpack-dev-server
├── config:
│ ├── webpack:
│ └── webpacker.yml
├── node_modules:
├── .babelrc
├── package.json
└── yarn.lock

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

使用

資料結構

1
2
3
4
5
6
7
app/javascript:
├── packs:
│ └── application.js
└── stylesheets:
│ └── application.css
└── images:
└── logo.svg

載入打包檔案

使用 javascript_pack_tagstylesheet_pack_tag 來載入打包的檔案:

1
2
3
4
5
6
7
<%# ./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 來載入靜態檔案:

1
2
3
4
<%# 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.jswebpack-dev-server.js 外包了一層來確認可以根據環境執行。

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

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

1
2
3
4
5
6
7
8
# 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

更新

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

其他

在 Webpacker 中使用 Rails 變數

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

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

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

參考

掃描二維條碼,分享此文章