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"]
          }
        }
      ]
    }
  ]
}
```
note

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

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

関連情報

Not finding what you're looking for?