Rails 5: Webpacker公式README — Webpack v4対応版(翻訳)

本READMEの他に、以下のWebpacker公式ドキュメントの歩き方記事もどうぞ。これら2本で、Webpackerの公式ドキュメントは概観できるかと思います。次は公式のユースケースが欲しいです🍰🍵。 【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報 概要 MITライセンスに基いて翻訳・公開いたします。 READMEリポジトリ: webpacker/README.md at master · rails/webpacker 原文更新日: 2018/05/18 ライセンス: MIT 更新や誤りにお気づきの方は@hachi8833までお知らせください。 Rails 5: Webpacker公式README — Webpack v4対応版(翻訳) Webpackerを用いることで、JavaScriptのプリプロセッサ兼バンドラーであるwebpack 4.x.x+を簡単に使えるようになり、アプリ的なJavaScriptをRailsで管理できます。Webpackerはアセットパイプラインと共存します。その理由は、Webpackがアプリ的なJavaScriptを主要な対象としているためです。app/assetsの下に居座り続ける画像やCSS、ましてやJavaScript Sprinklesは、Webpackの主要な対象ではありません。 しかし(訳注: Webpackと異なり)WebpackerはCSS/画像/フォントアセットも同様に扱うことが可能なので、アセットパイプラインすら不要になるかもしれません。Webpackerは、コンポーネントベースのJavaScriptフレームワークを独占的に利用する場合に最も適しています。 メモ: masterブランチのコードがついに(訳注: Webpack)v4.x.xになりました。3.x系ドキュメントについては3-x-stableブランチをご覧ください。 ⚓必要な環境 Ruby: 2.2以降 Rails: 4.2以降 Node.js: 6.0.0以降 Yarn: 0.25.2以降 ⚓Webpackerで利用できる機能 webpack 4.x.x ES6(ES2015) — babel経由 マルチエントリポイントを用いた自動コード分割 スタイルシート: SassとCSS 画像とフォント PostCSS – Auto-Prefixer アセット圧縮、ソースマップ、最小化(minification) CDNサポート React、Angular、Elm、Vueをすぐに利用可能 Railsビューヘルパー 拡張および設定可能 ⚓インストール方法 Rails 5.1以降のアプリを新規作成するときに–webpackという新オプションでWebpackerを追加できます。 # Rails 5.1以降で利用可能 rails new myapp –webpack あるいはGemfileに以下のように追加して、 # Gemfile gem ‘webpacker’, ‘~> 3.5’ # masterを使いたい場合 gem ‘webpacker’, git: ‘https://github.com/rails/webpacker.git’ # 4.x pre-releaseを試してみたい場合 gem ‘webpacker’, ‘>= 4.0.x’ yarn add @rails/webpacker@4.0.0-pre.2 # 訳注: この行はコマンドで実行 最後に以下を実行してWebpackerをインストールすることもできます。 bundle bundle exec rails webpacker:install # Rails 5.0 より前の場合 bundle exec rake webpacker:install ⚓使い方 インストールが終われば、現代的なES6フレーバーJavaScriptアプリをすぐにでも書き始められます。 app/javascript: ├── packs: │ # ここにはwebpackエントリファイルだけが置かれる │ └── application.js └── src: │ └── application.css └── images: └── logo.svg javascript_pack_tagヘルパーを用いて、Railsビュー内でJavaScriptのpackをリンクできます。packファイルでスタイルシートがインポートされる場合は、stylesheet_pack_tagでリンクできます。 <%= javascript_pack_tag ‘application’ %> <%= stylesheet_pack_tag ‘application’ %> <link rel=”prefetch”>タグや<img />タグで静的アセットをリンクしたい場合は、asset_pack_pathヘルパーを利用できます。 <link rel=”prefetch” href=”<%= asset_pack_path ‘application.css’ %>” /> <img src=”<%= asset_pack_path ‘images/logo.svg’ %>” /> メモ: スタイルシートや静的アセットのファイルをビューから利用するには、それらをパックやエントリファイルにリンクする必要があるでしょう。 ⚓開発 Webpackerをインストールすると、./bin/webpackと./bin/webpack-dev-serverという2つのbinstubができます。どちらも、それぞれ標準のwebpack.js実行ファイルとwebpack-dev-server.js実行ファイルの薄いラッパーであり、環境に合う設定ファイルや環境変数を正しく読み込むためのものです。 訳注(2018/05/24): 本READMEで言及されているwebpack/webpack-dev-serverは現在メンテナンスモードに移行済みです。現在はdevなしのwebpack-contrib/webpack-serveに移行しましたが、現時点ではRailsのWebpackerリポジトリにまだ導入されていない様子です。新名称の末尾はserverではなくserveなので微妙に紛らわしいです。 追記(2018/10/16) 上記のwebpack-serveは、その後メンテナー不在などの理由によりdeprecatedとなっています。現在は元のwebpack-dev-serverを使うよう指示されています。上の情報は古いのでご注意下さい。 development環境のWebpackerは、デフォルトでは(一括ではなく)必要に応じてコンパイルを実行します。コンパイルは、Webpackerのヘルパーメソッドを用いてpackアセットを参照するときに実行されます。つまり、コンパイルのために別プロセスを走らせる必要がないということです。コンパイルエラーは標準のRailsログに出力されます。 コードのライブリロード機能を使いたい場合や、JavaScriptの量が多すぎてオンデマンドコンパイルが遅い場合は、./bin/webpack-dev-serverまたはruby ./bin/webpack-dev-serverを実行する必要があります。Windowsユーザーは、bundle exec rails sを実行しているターミナルとは別のターミナルでがこれらのコマンドを実行する必要があります。このプロセスはapp/javascript/packs/*.jsファイルの変更を監視して自動的にブラウザ画面を再読み込みして最新表示にします。 # webpack dev server ./bin/webpack-dev-server # watcher ./bin/webpack –watch –colors –progress # スタンドアロンでのビルド … Continue reading Rails 5: Webpacker公式README — Webpack v4対応版(翻訳)