liferay-npm-bundlerの新しいモードを使用するためのプロジェクトの移行
issue #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ファイルをトランスパイルするためのルールを定義しています。 デフォルトローダーの完全なリストについては、 デフォルトローダーリファレンスを参照してください。 Creating Custom Loaders for Bundler の手順に従って、カスタムローダを作成します。 liferay-npm-bundlerはbabelで/src/
の* .js
ファイルを処理し、デフォルトの/build/
フォルダに結果を書き込みます。{ "sources": ["src"], "rules": [ { "test": "\\.js$", "exclude": "node_modules", "use": [ { "loader": "babel-loader", "options": { "presets": ["env"] } } ] } ] }
noteliferay-npm-bundlerの新しいモードはwebpackと非常によく似ていますが、** webpackとは互換性がありません**。 Webrayは単一のJavaScriptバンドルファイルを作成し、liferay-npm-bundlerはAMDローダーをターゲットにします。