,

[Ruby on Rails 5] Rails v5.1 と Webpacker v3.0 で生成される JavaScript まわりの設定を確認する

公開日: 2017/09/04
更新日: 2018/10/01

サンプルプロジェクトを作成して webpacker まわりを確認しました。

rails 5.1.3
webpacker 3.0.1

Contents

インストール

プロジェクトディレクトリと Gemfile を作成します。

% mkdir app
% cd app
% bundle init

git init します。

% git init

rails コメントを外します。

Gemfile
# frozen_string_literal: true
source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem 'rails'

bundle install で rails の最新バージョンをインストールします。

% bundle install --path vendor/bundle

プロジェクトファイルの作成

rails new でプロジェクトファイルを生成します。
(option: --webpack=vue)

% bundle exec rails new ./ --webpack

さらに gibo で .gitignore ファイルに追記します。

% git init
% gibo Rails JetBrains >> .gitignore

webpacker:install を実行します。

% bin/rails webpacker:install

(Option: webpacker:install:react)

% bin/rails webpacker
Available webpacker tasks are:
webpacker:install             Installs and setup webpack with yarn
webpacker:compile             Compiles webpack bundles based on environment
webpacker:check_node          Verifies if Node.js is installed
webpacker:check_yarn          Verifies if yarn is installed
webpacker:check_binstubs      Verifies that bin/webpack & bin/webpack-dev-server are present
webpacker:verify_install      Verifies if webpacker is installed
webpacker:yarn_install        Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn
webpacker:install:react       Installs and setup example React component
webpacker:install:vue         Installs and setup example Vue component
webpacker:install:angular     Installs and setup example Angular component
webpacker:install:elm         Installs and setup example Elm component

initial commit し、リモートリポジトリを登録します。

% git commit -m 'Initial commit'
% git remote add origin ssh://git@your_project.git
% git push -u origin master

以上で完了です。

Webpack まわり

設定

app/javascript/packs/application.js に記載されている <%= javascript_pack_tag 'application' %> をレイアウトファイルに追加します。

ToDo: Haml で設定する。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

サンプルスクリプトは、既に用意されています。

app/javascript/packs/application.js
console.log('Hello World from Webpacker');

開発

適当なビューを作成し、webpack されているか確認します。

ToDo: 不要なファイルの生成を抑制する。

% bin/rails generate controller Welcome index
Running via Spring preloader in process 17827
      create  app/controllers/welcome_controller.rb
       route  get 'welcome/index'
      invoke  erb
      create    app/views/welcome
      create    app/views/welcome/index.html.erb
      invoke  test_unit
      create    test/controllers/welcome_controller_test.rb
      invoke  helper
      create    app/helpers/welcome_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/welcome.coffee
      invoke    scss
      create      app/assets/stylesheets/welcome.scss

サーバを起動します。

bin/webpack-dev-server は、どうも必須ではないようです。

% bin/rails server

webpack されました。

Memo

  • app/javascript/packs に JavaScript を置く。
  • app/views/layouts/application.html.erb にレイアウトファイルにタグを追加する。
  • bin/webpack, bin/webpack-dev-server, bin/yarn が追加されている。
  • config/webpack の役割が不明。
  • config/webpacker.yml は設定ファイルのよう。
  • node_modules にパッケージは収まっている。
  • .babelrc があり、Babel ready である。
  • .postcssrc.yml があり、postcss-smart-import, postcss-cssnext が設定されている。
  • package.json では、webpacker と webpack-dev-server が設定されている。
  • yarn.lock が生成されているので yarn を利用する事になる。

補遺