Rails 5.1.0.rc1 + Webpacker 各種流水賬

Rails 5.1 的一大賣點是支援 Webpack (透過 webpacker gem).

以前曾經在某專案嘗試把 webpack 融入一個 rails 4.2 專案, 支援 react, redux, es6, … 後來順利完成了, 當時整理了一堆相關設定等等, 但一直都沒機會再次使用到這些資料…

看到 webpacker 的時候真的是感動落淚! 其實這個東西可以用在 rails 4.2 以上的專案, 所以這邊來嘗試一下能不能產生一個完全不需要 sprockets 的 rails 專案吧.

首先我們要拿掉一堆東西:

$ gem install rails -v 5.1.0.rc1
$ rails new <app-name> --no-rc --webpack --skip-sprockets --skip-coffee --skip-javascript --skip-turbolinks

但是 app/assets 還是會有一些不想看到的東西, 把他們砍掉吧:

$ rm -rf app/assets

要開兩個 server (rails 和 webpack) 太麻煩了, 用 foreman 來管理吧.

在 Gemfile 加入 gem 'foreman', 建立一個 Procfile:

rails: bin/rails server
webpack: bin/webpack-dev-server

然後隨便建立一個 controller, 把 root 指過去吧:

$ rails generate controller home --no-assets --no-helper

修改 app/views/layouts/application.html.erb:

<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>

這個時候系統會跟你說找不到 application.css.

webpacker 提供的設定中, 會將你任何在 [filename].js 中 require/import 的 css 檔案, 全部抽出來變成 [filename].css (透過 extract-text-webpack-plugin 達成), 所以只要在 application.js 中隨便 require/import 一個 css 即可:

import './application.css'
// 或者
require('./application.css')

這樣就沒問題了?

React

webpacker 已經有寫好的設定了, 只要這樣:

# 建立專案時
$ rails new <app_name> --webpack=react
# 之後追加
$ rails webpacker:install:react

Action Cable

用 yarn 安裝:

$ yarn add actioncable

在 javascript 中使用它:

import ActionCable from 'actioncable'

let cable = ActionCable.createConsumer()

jQuery

跟 Action Cable 差不多…

$ yarn add jquery

import $ from 'jquery'

Turbolinks

跟 Action Cable 差不多…

$ yarn add turbolinks

import Turbolinks from 'turbolinks'
Turbolinks.start()

Bootstrap

這個比較麻煩一點.

$ yarn add bootstrap

如果直接這樣的話, 會出現 jQuery is not defined (即使有 import jQuery from 'jquery'):

import 'bootstrap'

需要在 config/webpack/shared.js plugins 的陣列中加入:

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

這有點像是做這件事:

window.$ = require('jquery')
window.jQuery = require('jquery')

css 的部分:

import 'bootstrap/dist/css/bootstrap'

To be continued?