ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

liferay-npm-bundlerの新しいモードを使用するためのプロジェクトの移行

重要

Liferay npm バンドラーは Liferay 2024.Q4/Portal GA129 で廃止され、将来削除される予定です。

問題 #303以降、liferay-npm-bundler には 2 つの操作モードが利用可能になりました。バンドラーを実行する前にファイルを前処理したり、Webpack（一連のルールを介してソースファイルを処理する）のように、バンドラーを使用してプロセス全体を処理したりできます。次の手順に従ってプロジェクトを移行し、新しい構成モードを使用して、バンドラーがプロセス全体を処理できるようにします。

プロジェクトの package.json ファイルを開き、liferay-npm-bundlerのみを使用するように build スクリプトを更新します。

古いバージョン：
```
{
"scripts":{
   "build": "babel --source-maps -d build src && liferay-npm-bundler"
}
}
```
新しいバージョン：
```
{
"scripts":{
   "build": "liferay-npm-bundler"
}
}
```
プロジェクトの .npmbundlerrc ファイルでバンドラーが使用するルールを定義します（たとえば、ファイルをトランスパイルするためにbabelを実行する）。以下の設定例では、 babel-loader を使用してJavaScriptファイルをトランスパイルするためのルールを定義しています。デフォルトローダーの完全なリストについては、デフォルトローダーリファレンスを参照してください。カスタムローダーを作成するには、 Bundler 用のカスタムローダーの作成の手順に従います。 liferay-npm-bundlerはbabelで /src/ の * .js ファイルを処理し、デフォルトの /build/ フォルダに結果を書き込みます。
```
{
"sources": ["src"],
"rules": [
   {
      "test": "\\.js$",
      "exclude": "node_modules",
      "use": [
      {
         "loader": "babel-loader",
         "options": {
            "presets": ["env"]
         }
      }
      ]
   }
]
}
```
注

liferay-npm-bundler の新しいモードは webpack と非常によく似た動作をしますが、 webpack とは互換性がありません。 Webrayは単一のJavaScriptバンドルファイルを作成し、liferay-npm-bundlerはAMDローダーをターゲットにします。