Documentation

npmbundlerrc構造について

liferay-npm-bundlerは、ウィジェットプロジェクトのルートフォルダーに配置された .npmbundlerrc ファイルを介して構成されます。 完全な構成を手動で作成するか、(Babelを介して)構成プリセットを拡張できます。

デフォルトプリセットがliferay-npm-bundlerを構成する方法については、 default preset reference を参照してください。 Liferay JS Generatorと一緒にliferay-npm-bundlerを使用してJavaScriptウィジェットを作成する方法については、Creating JavaScript Widgets with JavaScript Toolingを参照してください。

構造

.npmbundlerrc ファイルには、4つの可能なフェーズ定義があります: copy-processpre-processpost-process 、そして babel です。 これらのフェーズの定義について、以下で詳しく説明します。

コピープロセス: コピープラグイン プロパティで定義されます(依存パッケージでのみ使用可能)。 特定の各パッケージからコピーまたは除外するファイルを指定します。

プリプロセス: プラグイン プロパティで定義さされます。 Babelフェーズが実行される前に実行するプラグインを指定します。

Babel: .babelrc 定義で定義されます。 パッケージの .jsファイルを通じてBabelを実行するときに使用する .babelrc ファイルを指定します。

注釈

このフェーズでは、Babelはパッケージファイルを変換します(たとえば、必要に応じてそれらをAMD形式に変換します)が、それらをトランスパイルしません。 理論的には、適切なプラグインを設定することでそれらをトランスパイルすることもできます。 関係のない両方のプロセスが混在しないように、バンドルを実行する前にトランスパイルすることをお勧めします。

ポストプロセス: ポストプラグイン プロパティで定義されます。 プリプロセス フェーズを使用する代わりに、これはバベルフェーズの完了後に実行するプラグインを指定します。

以下は、 .npmbundlerrc 構成の例です:

{
    "exclude": {
        "*": [
            "test/**/*"
        ],
        "some-package-name": [
            "test/**/*",
            "bin/**/*"
        ],
        "[email protected]": [
            "test/**/*",
            "bin/**/*",
            "lib/extras-1.0.10.js"
        ]
    },
    "include-dependencies": [
        "isobject", "isarray"
    ],
    "output": "build",
    "verbose": false,
    "dump-report": true,
    "config": {
        "imports": {
            "npm-angular5-provider": {
                "@angular/common": "^5.0.0",
            "@angular/core": "^5.0.0"
            }
        }
    },
    "/": {
    "plugins": ["resolve-linked-dependencies"],
    ".babelrc": {
      "presets": ["liferay-standard"]
    },
    "post-plugins": [
            "namespace-packages",
            "inject-imports-dependencies"
        ]
    },
    "*": {
      "copy-plugins": ["exclude-imports"],
      "plugins": ["replace-browser-modules"],
      ".babelrc": {
        "presets": ["liferay-standard"]
      },
      "post-plugins": [
        "namespace-packages",
        "inject-imports-dependencies",
        "inject-peer-dependencies"
      ]
    },
    "packages": {
        "a-package-name": [
        "copy-plugins": ["exclude-imports"],
        "plugins": ["replace-browser-modules"],
        ".babelrc": {
          "presets": ["liferay-standard"]
        },
        "post-plugins": [
          "namespace-packages",
          "inject-imports-dependencies",
          "inject-peer-dependencies"
        ]
        ],
        "[email protected]": [
          "copy-plugins": ["exclude-imports"],
          "plugins": ["replace-browser-modules"],
          ".babelrc": {
            "presets": ["liferay-standard"]
          },
          "post-plugins": [
            "namespace-packages",
            "inject-imports-dependencies",
            "inject-peer-dependencies"
          ]
        ]
    }
}

注釈

上記のすべての定義形式(「」、「some-package-name」、「some-package-name @ version」)が必要なわけではありません。 ほとんどの場合、ワイルドカード定義( 「 」)で十分です。 ワイルドカード以外の形式(「some-package-name」と「some-package-name @ version」)は、ワイルドカード定義が提供するよりも具体的な構成を必要とするパッケージのまれな例外です。

標準構成オプション

以下は、 .npmbundlerrc ファイルの標準構成オプションです。

config:すべてのliferay-npm-bundlerおよびBabelプラグインで使用できるようにするグローバル構成を定義します。 特定のプラグインごとに利用可能なオプションを見つけるには、各プラグインのドキュメントを参照してください。

{
  "config": {
    "imports": {
      "vuejs-provider": {
        "vue": "^2.0.0"
      }
    }
  }
}

dump-report: デバッグレポートを生成するかどうかを設定します。 trueの場合、プロジェクトおよびnpmモジュールの処理時に行われるすべてのアクションと決定を説明する liferay-npm-bundler-report.html ファイルがプロジェクトディレクトリに生成されます。 これをビルドフラグ $ liferay-npm-bundler --dump-report または $ liferay-npm-bundler -rとして渡すこともできます。 デフォルト値は falseです。

no-tracking: 使用状況分析をサーバーに送信するかどうかを設定します。 CLI引数 $ liferay-npm-bundler --no-trackingを使用するか、 プロジェクトのルートフォルダーまたはその祖先のいずれかにある.liferay-npm-bundler-no-tracking と呼ばれるマーカーファイルを作成して、これをビルドフラグとして渡すこともできます。または環境変数LIFERAY_NPM_BUNDLER_NO_TRACKING = ''を設定する方法でもできます。 デフォルト値は falseです。

出力: デフォルトでは、バンドラーは標準のGradleリソースフォルダーにパッケージを書き込みます: build/resources/main/META-INF/resources。 この値を設定して、デフォルトの出力フォルダーをオーバーライドします。 依存関係npmパッケージは、ビルドフォルダー内の node_modules フォルダーに配置されることに注意してください。 create-jar が設定されている場合、デフォルトの出力フォルダーは buildです。

preset: 基本構成として使用する liferay-npm-bundler プリセットを指定します。 .npmbundlerrc ファイルが提供されていない場合、デフォルトの liferay-npm-bundler-preset-standard プリセットが使用されることに注意してください。 プリセットで提供されるすべての設定は継承されますが、上書きすることができます。

verbose: ツールが実行していることに関する詳細情報をコンソールに出力するかどうかを設定します。 デフォルト値は falseです。

パッケージ処理オプション

"/":プロジェクトのパッケージのプラグインの構成。

"\":依存パッケージのプラグインの設定。

アスタリスク) :すべてのnpmパッケージのデフォルトのプラグイン構成を定義します。 対応するキーで識別される4つの値が含まれます。 キー コピープラグインプラグイン 及び ポストプラグインはコピー、プリ、ポストの各工程で適用するliferay-npm-bundlerプラグインの配列を示します。 キー .babelrc は、Babelステップで使用する構成を指定するオブジェクトを識別し、標準の .babelrc ファイルと同じ構造を持っています。

exclude: すべてまたは特定のパッケージからのバンドルから除外するファイルのglob式を定義します。 各リストは、 * (任意のパッケージ)、 {package name}(任意のバージョンのパッケージ)、または {package name}@{version}(特定のバージョンのパッケージ)のいずれかのキーで識別される配列です。 以下は設定例です:

{
  "exclude": {
    "*": ["__tests__/**/*"],
    "is-object": ["test/**/*"],
    "[email protected]": ["test/**/*", "Makefile"]
  }
}

ignore: プロジェクトのBabelで指定されたJavaScriptファイルの処理をスキップします。 以下は構成例です:

{
  "ignore": ["lib/legacy/**/*.js"]
}

include-dependencies: バンドルに含めるパッケージを定義します。 dependencies セクションの package.jsonに記載されていない場合も含まれます。 これらのパッケージは、 node_modules フォルダーで使用可能である必要があります(つまり、package.jsonに保存せずに手動でインストールするか、 devDependencies セクションにリストされています)。

packages: パッケージごとに、npmパッケージのプラグイン構成を定義します。

max-parallel-files: EMFILEエラーを回避するために並列処理するファイルの最大数を定義します(特にWindowsの場合)。 デフォルト値は 128です。

process-serially: :v 2.7.0から削除されました。 max-parallel-filesに置き換えられました。

rules: ローダーでプロジェクトソースファイルに適用するルールを定義します。 ルールには、使用するローダーを定義する use 配列プロパティが必要です。これは、パッケージ名または ローダーオプション プロパティ(該当する場合)を持つオブジェクトを使用して指定でき、以下の1つ以上のプロパティがあります。

  • test::ルールを適用するかどうかを決定するために ソース フォルダー内のファイルをフィルターする正規表現を定義します。 適格な各ファイルのプロジェクト相対パスが正規表現と比較され、一致するファイルはローダーによって処理されます。

  • exclude:除外するファイルを指定して、 test 式を絞り込みます。

  • include:含めるファイルを指定して、 test 式を絞り込みます。

以下は構成例です:

{
  "rules": [
    {
      "test": "\\.js$",
      "exclude": "node_modules",
      "use": [
        {
          "loader": "babel-loader",
          "options": {
            "presets": ["env", "react"]
          }
        }
      ]
    },
    {
      "test": "\\.css$",
      "use": ["style-loader"]
    },
    {
      "test": "\\.json$",
      "use": ["json-loader"]
    }
  ]
}

source: これらのプロジェクトフォルダー内のファイルにルールが適用されます。 フォルダを入れ子にすることができて(例えば /src/main/resources/)とPOSIXのパスセパレータを使用して書かれなければいけません(すなわち、Win32システム上では\のかわりに/を使わなければいけません)。 ルールはプロジェクトのパッケージ依存関係ファイルに自動的に適用されることに注意してください。

以下は構成例です:

{
  "sources": ["src", "assets"]
}

OSGiバンドル作成オプション

バージョン2.2.0以降、liferay-npm-bundlerはウィジェットOSGiバンドルを作成できます。 詳しい手順については、Creating and Bundling JavaScript Widgets with JavaScript Toolingを参照してください。 OSGiバンドル作成の構成オプションは次のとおりです:

*create-jar :真の値に設定すると、OSGiバンドルが作成されます。 trueに設定すると、すべてのサブオプションはデフォルト値を取ります。 オブジェクトが渡されると、各サブオプションを個別に構成できます。 これをビルドフラグとして渡すこともできます: $ liferay-npm-bundler --create- または $ liferay-npm-bundler -j。 デフォルト値は falseです。

{
  "create-jar": true
}

*create-jar.auto-deploy-portlet :このオプションは非推奨です。 代わりに create-jar.features.js-extender オプションを使用してください。

*create-jar.features.configuration :使用するシステム(OSGi)およびウィジェットインスタンス(ポートレット仕様で定義されているウィジェット設定)の構成を記述したファイルを指定します。 (必要な設定構成の詳細については、Configuring System Settings and Instance Settings for Your JavaScript Widgetsを参照してください)。 そのファイルが存在する場合、デフォルト値は features/configuration.json です。それ以外の場合、デフォルトは undefinedです。

{
  "create-jar": {
    "features": {
      "configuration": "features/configuration.json"
    }
  }
}

*create-jar.output-dir: 最終的なJARを配置する場所を指定します。

{
  "create-jar": {
    "output-dir": "dist"
  }
}

*create-jar.features.js-extender: OSGiバンドルをJS Portlet Extenderで処理するかどうかを制御します。 バンドルに使用するエクステンダーの最低限必要なバージョンを指定することもできます。 これは、バンドルで高度な機能を使用したいが、Extenderの古いバージョンで展開可能にしたい場合に役立ちます。 ストリング "any" を渡して、バンドルをエクステンダーの任意のバージョンにデプロイできるようにします。 trueの場合、liferay-npm-bundlerは、バンドルで使用される機能に必要なエクステンダーの最小バージョンを自動的に決定します。 デフォルト値は trueです。 以下は構成例です:

{
  "create-jar": {
    "features": {
      "js-extender": "1.1.0"
    }
  }
}

*create-jar.features.web-context: バンドルの静的リソースの公開に使用するコンテキストパスを指定します。 デフォルト値は /{project name}-{project version}です。

{
  "create-jar": {
    "features": {
      "web-context": "/my-project"
    }
  }
}

*create-jar.features.localization: バンドルに使用するL10Nファイルを指定します。ウィジェットでのローカリゼーションの使用の詳細については、Providing Localization in Your JavaScript Widgetsを参照してください。 デフォルト値は、そのベース名を持つプロパティファイルが存在する場合、 features/localization/Language です。それ以外の場合、デフォルトは undefinedです。

{
  "create-jar": {
    "features": {
      "localization": "features/localization/Language"
    }
  }
}

*create-jar.features.settings: このオプションは非推奨です。 代わりに create-jar.features.configuration オプションを使用してください。

注釈

プラグインの設定では、可能なすべてのフェーズでプラグインを設定するためのオプションと、バベルを実行する際に使用する.babelrcファイルを指定します(このファイルフォーマットの詳細については、 Babel's documentation を参照してください)。

注釈

liferay-npm-bundlerのバージョン1.4.0以前では、パッケージの構成はtoolsオプション(「」、「output」、「exclude」など)の隣に配置されていました。 パッケージ名の衝突を防ぐために、パッケージ構成はネームスペースになり、「パッケージ」セクションの下に配置されます。 後方互換性を維持するために、パッケージ構成がない場合、liferay-npm-bundlerは、パッケージ構成の「packages」以外のルートセクションにフォールバックします(「package-name @ version」、「package-name」、または「」)。

これで、 .npmbundlerrc ファイルの構造がわかりましたね!