Documentation

How AMD Loader Configuration is Exported

Note

If you don’t understand how Liferay AMD Loader works under the hood, please read Liferay AMD Module Loader first.

With de-duplication in place, JavaScript modules are made available to Liferay AMD Loader through the configuration returned by the /o/js_loader_modules URL.

The OSGi bundle shown below is used for reference in this article:

  • my-bundle/

    • META-INF/

      • resources/

        • package.json

          • name: my-bundle-package

          • version: 1.0.0

          • main: lib/index

          • dependencies:

            • isarray: 2.0.0

            • isobject: 2.1.0

        • lib/

          • index.js

        • node_modules/

          • isobject@2.1.0/

            • package.json

              • name: isobject

              • version: 2.1.0

              • main: lib/index

              • dependencies:

                • isarray: 1.0.0

          • isarray@1.0.0/

            • package.json

              • name: isarray

              • version: 1.0.0

          • isarray@2.0.0/

            • package.json

              • name: isarray

              • version: 2.0.0

For example, for the above structure, as explained in OSGi Bundles and npm Package Structure, the configuration below is published for Liferay AMD loader to consume:

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},
  ...
}

Note:

  • The Liferay.PATHS property describes paths to the JavaScript module files.

  • The Liferay.MODULES property describes the dependency names and versions of each module.

  • The Liferay.MAPS property describes the aliases of the package’s main modules.