AMDローダー構成のエクスポート方法

AMDローダー構成のエクスポート方法

note

Liferay AMD Loader の仕組みがわからない場合は、まず Liferay AMD Module Loaderを読んでください。

重複除外 されている場合、JavaScriptモジュールは、 /o/js_loader_modules URLによって返される構成を通じてLiferay AMD Loaderで使用できるようになります。

本記事では、下図のOSGiバンドルを参考としています。

  • my-bundle/
    • META-INF/
      • resources/
        • package.json
          • name: my-bundle-package
          • バージョン:1.0.0
          • main: lib/index
          • 依存関係:
            • isarray:2.0.0
            • isobject: 2.1.0
        • lib/
          • index.js
        • node_modules/
          • [email protected]/
            • package.json
              • name: isobject
              • バージョン:2.1.0
              • main: lib/index
              • 依存関係:
                • isarray: 1.0.0
          • [email protected]/
            • package.json
              • name: isarray
              • バージョン:1.0.0
          • [email protected]/
            • package.json
              • name: isarray
              • バージョン: 2.0.0

たとえば、上記の構造の場合、 OSGiバンドルとnpmパッケージ構造で説明されているように、Liferay AMDローダーが使用するために以下の構成が公開されています。

Liferay.PATHS = {
  ...
  '[email protected]/lib/index': '/o/js/resolved-module/[email protected]/lib/index',
  '[email protected]/index': '/o/js/resolved-module/[email protected]/index',
  '[email protected]/index': '/o/js/resolved-module/[email protected]/index',
  '[email protected]/index': '/o/js/resolved-module/[email protected]/index',
  ...
}
Liferay.MODULES = {
  ...
  "[email protected]/lib/index.es": {
    "dependencies": ["exports", "isarray", "isobject"],
    "map": {
      "isarray": "[email protected]",
      "isobject": "[email protected]"
    }
  },
  "[email protected]/index": {
    "dependencies": ["module", "require", "isarray"],
    "map": {
      "isarray": "[email protected]"
    }
  },
  "[email protected]/index": {
    "dependencies": ["module", "require"],
    "map": {}
  },
  "[email protected]/index": {
    "dependencies": ["module", "require"],
    "map": {}
  },
  ...
}
Liferay.MAPS = {
  ...
  '[email protected]': { value: '[email protected]/lib/index', exactMatch: true}
  '[email protected]': { value: '[email protected]/index', exactMatch: true},
  '[email protected]': { value: '[email protected]/index', exactMatch: true},
  '[email protected]': { value: '[email protected]/index', exactMatch: true},
  ...
}

注:

  • Liferay.PATHS プロパティは、JavaScriptモジュールファイルへのパスを記述します。
  • Liferay.MODULES プロパティは、各モジュールの依存関係の名前とバージョンを記述します。
  • Liferay.MAPS プロパティは、パッケージのメインモジュールのエイリアスを示します。