liferay-npm-bundlerの以前のバージョンでは、バンドラーが実行される前に、ビルドがいくつかの前処理を行い、次にバンドラーが前処理されたファイルからの出力を変更しました。以下のビルドスクリプトの例を示します。
{
"scripts":{
"build": "babel --source-maps -d build src && liferay-npm-bundler"
}
}
新しいモードでは、liferay-npm-bundlerがwebpackなどのプロセス全体を担当し、一連のルールを介して構成されます。 以下に示すように、ビルドスクリプトは凝縮されています。
{
"scripts":{
"build": "liferay-npm-bundler"
}
}
以下の手順に従って、新しい構成モードを使用するようにプロジェクトを移行します。
-
プロジェクトの
package.json
ファイルを開き、lifebuild-npm-bundlerのみを使用するようにbuild
スクリプトを更新します。{ "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"] } } ] } ] }