[Rails5.1][webpacker] 既存プロジェクトをRails5.1にアップデートしたので、webpackerを使って、楽できる感じの JS(ES6)とRailsの開発環境を構築してみた

  • 1
    いいね
  • 0
    コメント

経緯

環境を以下のようにアップデートしたので、webpackerを導入しました。
- Rails 5.1.3

既存プロジェクトにwebpackerを導入する

  • 基本的に README を見れば問題ないです
    • またのコマンドを打てば、サンプル(大元になるガイド)ファイルも出力してくれるので、乗っかればやりやすいです。
Gemfile
gem 'webpacker', '~> 2.0'
# OR if you prefer to use master
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

gem 'foreman'
bundle install
./bin/rails webpacker:install

vueを導入

  • elmやreactも導入するコマンドがあります
./bin/rails webpacker:install:vue
config/webpack/loaders/vue
const { env, settings } = require('../configuration.js')

const isProduction = env.NODE_ENV === 'production'
const extractCSS = !settings.dev_server.hmr

module.exports = {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: isProduction || extractCSS
  }
}

既存環境との両立

  • 既存の古いJSもたくさんあったので、一気にwebpacker環境に持っていくのは大変そうだったため、共存させつつ、少しずつ移行していくことにしました。
  • webpacker環境のファイル構成を app/frontend 以下に構築します。
  • app/frontend/packs 以下のファイルを、 public/packs 以下に、 Compileした後に 出力します。
config/webpacker.yml
default: &default
  source_path: app/frontend
  source_entry_path: packs
  public_output_path: packs

.
.
.
config/webpack/development.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');
const { settings, output } = require('./configuration.js');

module.exports = merge(sharedConfig, {
  devtool: 'cheap-eval-source-map',

  output: {
    pathinfo: true
  },
.
.
.


});

viewファイルからのインクルード

index.slim
= stylesheet_pack_tag 'hoge/style/main' # /public/packs/hoge/style/main.css を読みます
= javascript_pack_tag 'hoge/main' # /public/packs/hoge/main.js を読みます
= javascript_include_tag 'http://d3js.org/d3.v3.min.js' # おなじみのタグも使えます

開発の為の工夫

webpacker環境下のファイルを編集したらブラウザがライブリロードされてほしい

  • rails s と合わせて、 webpackerもwatchしたまま走らせたい
    • formanを使って、両方を一つの npm run script で叩く
Procfile.dev
web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server
package.json
{
  "scripts": {
    "dev": "bundle install && bundle exec foreman start -f Procfile.dev",
    "build": "bundle exec rails webpacker:compile",
  },
}

開発の際は

yarn dev を叩いて開発