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

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

[markdown]
“`prettyprinted
rails 5.1.3
webpacker 3.0.1
“`

## インストール

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

“`prettyprinted
% mkdir app
% cd app
% bundle init
“`

`git init` します。

“`prettyprinted
% git init
“`

`rails` コメントを外します。

“`ruby:Gemfile
# frozen_string_literal: true
source “https://rubygems.org”
git_source(:github) {|repo_name| “https://github.com/#{repo_name}” }
gem ‘rails’
“`

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

“`prettyprinted
% bundle install –path vendor/bundle
“`

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

> * [Rails 5.1へのアップデート | 酒と涙とRubyとRailsと](http://morizyun.github.io/ruby/rails-versionup-update-rails5.1.html)

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

“`prettyprinted
% bundle exec rails new ./ –webpack
“`

さらに [gibo](https://github.com/simonwhitaker/gibo) で `.gitignore` ファイルに追記します。

“`prettyprinted
% git init
% gibo Rails JetBrains >> .gitignore
“`

`webpacker:install` を実行します。

> * [rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails](https://github.com/rails/webpacker#installation)

“`prettyprinted
% bin/rails webpacker:install
“`

(Option: `webpacker:install:react`)

“`prettyprinted
% 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` し、リモートリポジトリを登録します。

“`prettyprinted
% git commit -m ‘Initial commit’
% git remote add origin ssh://git@your_project.git
% git push -u origin master
“`

以上で完了です。

## Webpack まわり

> * [Drifting Ruby | Ruby on Rails 5.1.0 Changes and New Features](https://www.driftingruby.com/episodes/ruby-on-rails-5-1-0-changes-and-new-features)

### 設定

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

> * [rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails](https://github.com/rails/webpacker#usage)

**ToDo: Haml で設定する。**

“`haml:app/views/layouts/application.html.erb




<%= 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' %>


<%= yield %>


“`

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

“`javascript:app/javascript/packs/application.js
console.log(‘Hello World from Webpacker’);
“`

### 開発

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

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

“`prettyprinted
% 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
“`

サーバを起動します。

> * [rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails](https://github.com/rails/webpacker#development)

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

“`prettyprinted
% bin/rails server
“`

webpack されました。

> * [DriftwoodJP/sandbox-rails51](https://github.com/DriftwoodJP/sandbox-rails51)

### 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` を利用する事になる。

## 補遺

> * [Webpacker 3.0: No separate process needed, less config generated | Riding Rails](http://weblog.rubyonrails.org/2017/8/30/webpacker-3-0/)
[/markdown]