Liferay npmバンドラーローダーについて
Liferay npm バンドラーは Liferay 2024.Q4/Portal GA129 で廃止され、将来削除される予定です。
liferay-npm-bundlerのメカニズムは、webpackに似ています。 webpackと同様に、liferay-npm-bundlerは、最終出力を生成する前にプロジェクトのソースファイルを変換するローダーを含む一連のルールを使用してファイルを処理します。
webpackは単一のJSバンドルファイルを作成しますが、liferay-npm-bundlerはAMDローダーを対象としているため、webpackとliferay-npm-bundlerローダーは互換性がありません。
ローダーとは、メインモジュールにソースファイルを受け取り、ローダーの設定に基づいて新規または修正されたファイルを返す関数をエクスポートするnpmパッケージです。 たとえば、 babel-loader は ES6+ JavaScript ファイルを受け取り、それに対して Babel を実行し、生成されたソースマップとともにトランスパイルされた ES5 ファイルを返します。 このパターンを使用して カスタム ローダーを作成できます。 ローダー関数の例をいくつかご紹介します：
- JavaScriptファイルをBabelまたはTSC経由で渡す
- CSSファイルを、CSSをHTMLページに動的に挿入するJSモジュールに変換する
- SASSでCSSファイルを処理する
- インターフェース記述言語 (IDL) ファイルに基づいてコードを生成するツールを作成する
ローダーは、プロジェクトの.npmbundlerrcファイルを介して構成されます。 ローダーの設定は、2つの主要なオプションを使用して指定されます。
ソース：処理するソースファイルを含むフォルダルール: ローダー、オプション—(該当する場合)—、および処理するファイルを決定する正規表現。
構成要件とオプションの詳細については、「 .npmbundlerrcの構造の理解 」を参照してください。
ローダーはチェーン化できます。 ローダーは、 useプロパティにリストされている順序でファイルを処理します。 ファイルは、ルールによってファイルが処理されるまで、最初のローダーに渡されて処理され、次のローダーに送信されます。 SASSファイルをsass-loaderを使用してCSSに変換するなどの複雑なプロセスを実行してから、スタイルローダーを使用してそれをJavaScriptモジュールに変換できます。 ルールが適用されると、liferay-npm-bundlerは、バンドラープラグインのpre、post、およびbabelフェーズを続行します。