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

liferay-npm-bundlerの以前のバージョンでは、バンドラーが実行される前に、ビルドがいくつかの前処理を行い、次にバンドラーが前処理されたファイルからの出力を変更しました。以下のビルドスクリプトの例を示します。

{
  "scripts":{
    "build": "babel --source-maps -d build src && liferay-npm-bundler"
  }
}

新しいモードでは、liferay-npm-bundlerがwebpackなどのプロセス全体を担当し、一連のルールを介して構成されます。 以下に示すように、ビルドスクリプトは凝縮されています。

{
  "scripts":{
    "build": "liferay-npm-bundler"
  }
}

以下の手順に従って、新しい構成モードを使用するようにプロジェクトを移行します。

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

    {
      "scripts":{
        "build": "liferay-npm-bundler"
      }
    }
    
  2. プロジェクトの .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プロジェクトの1.xから2.xへの移行liferay-npm-bundler用のカスタムローダーの作成 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています