Ruby on RailsアプリケーションでWebpackerを使用する—詳細

インターネット時代の初めには、ウェブサイトははるかに単純で、あまりインタラクティブではありませんでした。テクノロジー、デバイス、プログラミング言語の進歩に伴い、それらはより複雑になり、画像やCSSスタイルシートなどのアセットを含むいくつかのファイルで構成されていました。

Webサイトがインタラクティブであるほど、使用する必要のあるJavaScriptコードが多くなります。このようなコードを使用するには、scriptタグを使用してすべてのHTMLコードファイルを含める必要があります。このようなアプローチでは、すべてのファイルを含めて正しい順序を維持する必要があるため、エラーが発生しやすくなります。そうしないと、コードが機能しない可能性があります。 Webpackツールを使用すると、これらの問題は解消されます。 Webpackerは、WebpackとRailsアプリケーションの間の架け橋です。

この記事では、Webpackerについて深く掘り下げ、このツールが内部でどのように機能するかを理解できるようにする詳細な説明を提供します。コンテンツをできるだけ価値のあるものにするために、次のセクションに分割することにしました。

• 概要 —詳細を説明する前に、WebpackとWebpackerの両方の概要を説明します。より高度なトピックの準備として扱うことができます。
• 構造の説明 —複数のファイルを調査するので、特定の構造が使用された理由と、それが一般的な目的にどのように応答するかを知っておくとよいでしょう。
• 解剖学的説明 —このパートでは、Webpackセットアップの最も重要なファイルの調査について説明します。それらがどのように機能するかを知ることは、効果的で手間のかからない開発プロセスにとって不可欠です。
• 環境固有の設定 —最後の部分では、Webpackerが開発環境と本番環境でどのように機能するかを説明します。

この記事を読むと、WebpackとWebpackerとは何か、そしてRailsアプリケーションでそれらが必要な理由がわかります。 Webpackerの内部を深く掘り下げると、ツールがWebpackとどのように接続し、Railsアプリケーションとどのように通信するかを理解するのに役立ちます。

飛び込む前

深海に出る前に、まず準備する必要があります。高レベルの概要は、特定のツールの目的と、ツールの内部に深く入り込むことなく解決する問題を理解するのに役立つため、テクノロジーの使用を開始するのに最適な方法です。

Webpack

Webpackは、JavaScriptファイルコードを整理してエラーを回避し、Webサイトのパフォーマンスを向上させるのに役立つことはすでに説明しました。コードをバンドルに編成します。

バンドルは、最初に作成された依存関係グラフを尊重して、複数のモジュールがインテリジェントに配置されたファイルです。このプロセスのおかげで、コードが期待どおりに機能し、特定のライブラリのコードを呼び出す前に、コードが読み込まれていることを確認できます。

Railsの最新バージョンでデフォルトで使用されるツールはWebpackだけではありません。プロジェクトが生成されると、BabelおよびPostCSSの構成ファイルも作成されます。 PostCSSはJavaScriptでCSSを変換するためのツールであり、Babelはブラウザのサポートを気にせずに最新のJavaScriptを記述できるようにするJavaScriptコンパイラです。

ウェブパッカー

Webpackerは、WebpackをRailsアプリケーションと統合するツールです。 JavaScriptのようなアプリケーションを簡単に構成および開発し、本番環境向けに最適化できます。

ソースコードはgemとして利用でき、ライブラリには開発サーバーが付属しているため、JavaScriptファイルに導入された変更を確認するためにサーバーを停止して起動する必要がないため、アプリの開発を非常に高速に行うことができます。

ディープイマージョン

Webpackが作成された理由と、RailsアプリケーションでWepackerが果たす役割がわかったので、Webpackerの内部に焦点を当てて、ファイルの整理、開発プロセスの高速化、本番環境向けのファイルの最適化を確認できます。

Webpackerは、Railsの最新バージョンですぐに使用できます。新しいプロジェクトを作成する前に、ノードのバージョンがwebpacker:installとして10.17.0以上であることを確認してください コマンドは、railsnewコマンドで自動的に呼び出されます。

Webpackerファイル構造

インストールコマンドが実行されると、次のファイルが作成されます。

• config/webpacker.yml —デフォルトの構成と特定の環境の構成を含むメイン構成ファイル
• config/webpacker/ —特定の環境用のJavaScript構成ファイルが作成されるディレクトリ
• bin/webpack —webpackを呼び出してバンドルを作成する実行可能ファイル
• bin/webpack-dev-server —開発サーバーを起動する実行可能ファイル。バンドルに含まれるJavaScriptファイル内で変更を加えるたびにwebpackをリロードします

構成ファイルの構造

Webpackerのメイン構成ファイルはconfigディレクトリの下にあり、webpacker.ymlという名前です。 。 Webpackerとは異なり、Webpackの構成は、環境ごとにconfig/webpackに個別に保存されます。 ディレクトリ。

ウェブパッカー

デフォルトでは、構成ファイルには多くのエントリが含まれています。デフォルトのエントリと、特定の設定を上書きできる各環境のセクションです。最も重要な設定を見てみましょう：

• source_path —アプリケーション内のjavascriptファイルの主要なソース。 app/javascriptに設定されています デフォルトでは、通常、この値を変更する必要はありません。
• source_entry_path —パックファイルを保持するsource_pathの下のディレクトリの名前、別名エントリポイント。デフォルトでは、この設定はパックのディレクトリに設定されています。
• public_root_path —ブラウザからアクセスできるアプリケーション内のディレクトリへのパス。典型的なRailsアプリケーションでは、これはパブリックディレクトリです
• public_output_path — Webpackerがファイルをコンパイルすると、コンパイルされたすべてのファイルがこのディレクトリのpublic_root_pathの下に配置されます。 。デフォルトでは、ディレクトリの名前はpacksですが、好きなように呼び出すことができます。
• webpack_compile_output —フラグがtrueに設定されている場合、ファイルのコンパイル時に出力メッセージが表示されます。コンパイルが失敗したときに、それを認識してアクションを実行できるので便利です。

開発セクションには、サーバーを再起動せずに開発環境でファイルをコンパイルするために使用される開発サーバーの構成も含まれていることに注意してください。

Railsコンソールまたはコードレベルから構成にアクセスする場合は、Webpacker.manifest.configを呼び出すことができます。 、構成クラスインスタンスを返します。

Webpack

各環境には構成ファイルがありますが、すべてのファイルで、メイン環境ファイルがインポートされます：config/webpack/environment.js 。環境構成ファイルには、Webpackのデフォルトの動作を変更するカスタムプラグインをロードする場所があります。ファイルをコンパイルするためのカスタムルールを追加することもできます。

パックファイルの構造

パックはapp/javascript/packsの下にあります ディレクトリ。各パックファイルは、コンパイルプロセスの開始時にWebpackerによってエントリポイントとして扱われます。

デフォルトのパックファイル

新しいRailsプロジェクトを生成すると、application.jsという名前のデフォルトのパックファイルが次の内容で作成されます。

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";
import "channels";
 
Rails.start();
Turbolinks.start();
ActiveStorage.start();

ご覧のとおり、最初のステップは、指定されたライブラリをインポートし、必要に応じてその初期化メソッドを呼び出すことです。 importを呼び出すと、システムは特定のノードモジュールまたはローカルライブラリを検索します。標準的なアプローチでは、スクリプトタグを使用してページソースにライブラリを含めるときにライブラリが初期化されるため、ライブラリを明示的に初期化する必要はありません。

パックファイルのグッドプラクティス

通常のJavaScriptコードをパックファイル内に配置して実行することはできますが、JavaScriptコードをパックファイル内に保持することはお勧めしません。最善のアプローチは、ファイルをクリーンに保ち、ここでライブラリをインポートして初期化し、他のロジックをpacksディレクトリの外に保持することです。

アプリケーションにパックファイルを含める

パックファイルは、Webサイトのソースに自動的に含まれません。アセットパイプラインの場合と同様に、ビュー内で特別なタグを使用する必要があります：

<%= javascript_packs_with_chunks_tag 'application' %>

この方法はどのように機能しますか？内部的には、config/webpacker.ymlに入力したデータを保持するWebpacker構成を呼び出します。 ファイル。エントリポイントディレクトリ内のapplication.jsファイルを検索します。この場合はapp/javascript/packsです。 。次のコードを呼び出すことで確認できます：

Webpacker.manifest.config.source_entry_path

エントリが見つかると、Webpackerはjavascript_include_tagを呼び出します メソッド、ActionViewからのヘルパー Railsでデフォルトで利用可能なライブラリ。このメソッドは1つ以上のソースを受け入れ、ビューに直接適用できるスクリプトタグを返します。

開発サーバー

Webpacker開発サーバーのエントリポイントは、bin内に配置された実行可能ファイルです。 フォルダと名前webpack-dev-server 。サーバーを実行するプロセスは、次の5つのステップで構成されます。

• 環境の設定 —ノードとレールの環境名が設定されます。環境が指定されていない場合、プログラムはサーバーが開発環境で実行されると想定します。
• 構成の読み込み —ファイルconfig/webpacker.yml 前の手順で設定した環境の設定が読み込まれます。
• コマンドオプションの検証 —プログラムは、サーバーコマンドに適切なオプションを渡したかどうかを確認します。たとえば、--httpsの場合、エラーがスローされます オプションが指定されていますが、config/webpacker.ymlで指定していません ファイル。
• ポートの可用性の確認 —プログラムは、指定されたポートが使用可能かどうかを確認します。別のプログラムがすでにそれを使用している場合は、config/webpacker.yml内のwebpackサーバー構成を更新する必要があることを通知するエラーがスローされます。 ファイル。
• webpackserveコマンドを実行しています —ノードモジュールディレクトリが存在する場合、プログラムはディレクトリ内でコマンドを実行します。それ以外の場合、プログラムはyarnを使用してコマンドを実行します。プログラムは、config/webpack/内に配置されたファイルの1つを指すコマンドに構成オプションを渡します。 ディレクトリ。

サーバーが実行され、コードがその場でコンパイルされるため、サーバーを再起動して変更を確認したり、webpackが新しいコードでバンドルを作成できたかどうかを確認したりする必要はありません。

開発サーバーのコードは非常に単純です。 YAML形式の構成ファイルから構成をロードするだけで、JavaScript形式の適切な構成をwebpack serveに直接渡します。 指図。手動で実行することもできますが、組み込みコマンドで適切なコマンド引数を処理する必要はありません。

本番環境用のファイルのコンパイル

webpackerを使用しているアプリケーションをデプロイするとします。その場合は、assets:precompileを呼び出すだけです。 Webpackerがタスクを自動的にフックするようにタスクwebpacker:compile それに。

webpacker:compileはどのように機能しますか ボンネットの下でのタスク作業？それを掘り下げて見てみましょう。次のことを行います：

• メインの呼び出しを2つのブロックにラップし、NODEを確保します。 環境が設定され、Webpackerログが標準出力に出力されます。
• Webpackを呼び出し、ログを解析して、アクションが成功したかどうかを判断します。

これで、public/packs/jsにアクセスできます。 コンパイルされたファイルを表示するディレクトリ。サーバーにデプロイする必要があります。

概要

Webpackerが内部でどのように機能するかを学びました。これは、WebpackライブラリとRailsアプリケーション間のブリッジとして扱うことができ、Rubyを使用してWebpackを構成し、アプリケーション内でjavascriptコードを簡単に使用できます。

記事全体を要約すると、Webpackerの主な要素をもう一度思い出してみましょう。

• 構成— config/webpacker.yml内に配置されます ファイルを作成し、JavaScriptファイルとパックを保存するディレクトリをWebpackerにポイントさせることができます
• パック—Webpackerがコンパイルを開始する単一のエントリポイントです。そのファイルにインポートおよび初期化された各ライブラリは、自動的にコンパイルされます。
• 開発サーバー—ファイルをその場でコンパイルできるシンプルなスクリプト。JavaScriptファイルを変更するたびにサーバーを再起動する必要はありません
• コンパイルタスク— Webpackを呼び出し、パブリックディレクトリの下にあるファイルをコンパイルして、本番サーバーにデプロイし、エンドユーザーが利用できるようにする単純なrakeタスク
• ビューヘルパー—コンパイルされたファイルをビュー内に含めることができるヘルパー

経験の浅い多くの開発者にとって、Wepackerは少し魔法のように見えますが、実際には、RubyでWebpackを使用するのに役立つシンプルなライブラリです。

P.S。 Ruby Magicの投稿をマスコミから離れたらすぐに読みたい場合は、Ruby Magicニュースレターを購読して、投稿を1つも見逃さないでください。