AMD向けにJavaScriptモジュールをフォーマットする方法
Liferay AMDローダーは AMD仕様 に基づいています。 npm OSGiバンドル内のすべてのモジュールは、AMD形式でなければなりません。 これは CommonJS モジュールに対して、定義呼び出しの中でモジュールコードをラップすることによって行われます。 liferay-npm-bundlerは、モジュールをラップして、このプロセスを自動化するのに役立ちます。 以下の構造について詳しくは、 OSGiバンドルとnpmパッケージ構造 をご覧ください。
my-bundle/META-INF/リソース/package.json- name: my-bundle-package
- バージョン：1.0.0
- main: lib/index
- 依存関係:
- my-bundle-package$isarray: 2.0.0
- my-bundle-package$isobject: 2.1.0
- …
lib/index.js- …
- …
node_modules/[email protected]/package.json- name: my-bundle-package$isobject
- バージョン：2.1.0
- main: lib/index
- 依存関係:
- my-bundle-package$isarray: 1.0.0
- …
- …
[email protected]/package.json- name: my-bundle-package$isarray
- バージョン：1.0.0
- …
- …
[email protected]/package.json- name: my-bundle-package$isarray
- バージョン：2.0.0
- …
- …
たとえば、 [email protected] 2.1.0 パッケージの index.js ファイルには、次のコードが含まれています。
'use strict';
var isArray = require('my-bundle-package$isarray');
module.exports = function isObject(val) {
return val != null && typeof val === 'object' && isArray(val) === false;
};
AMD形式用に構成された更新されたモジュールコードを以下に示します。
define(
'[email protected]/index',
['module', 'require', 'my-bundle-package$isarray'],
function (module, require) {
'use strict';
var define = undefined;
var isArray = require('my-bundle-package$isarray');
module.exports = function isObject(val) {
return val != null && typeof val === 'object'
&& isArray(val) === false;
};
}
);
モジュールの名前は、そのパッケージ、バージョン、およびファイルパスに基づいている必要があります（たとえば、「[email protected]/index」）。そうでない場合、Liferay AMD Loaderはそれを見つけることができません。
モジュールの依存関係に注意してください： ['module'、 'require'、 'my-bundle-package$isarray']。
AMD仕様で定義されているように、 module.exports オブジェクトとローカル require 関数への参照を取得するには、 module および require 使用する必要があります。
後続の依存関係は、このモジュールが依存するモジュールを示します。 例の my-bundle-package$isarray はパッケージではなく、 my-bundle-package$isarray パッケージのメインモジュールのエイリアスであることに注意してください（したがって、 my-bundle-package$isarray/ indexと同等です））。
package.jsonファイルから、my-bundle-package$isarray が <my-bundle-package$isarray/index を指していることがわかりますが、さらにそれがはそのようなパッケージのバージョン 1.0.0 に解決しなければならないということ、つまり、この場合の my-bundle-package$isarray/index は [email protected]/index を指しているという情報がファイルからわかります。
また、ファイルの先頭に var define = undefined; が追加されていることにもお気づきでしょう。 これは liferay-npm-bundler によって導入され、モジュールを（AMD環境ではなく）CommonJS環境内にあると考えさせます。 これは、一部のnpmパッケージがUMD形式で記述されており、AMD define（） 呼び出し内にラップしているため、独自の define（） を実行させたくないが、CommonJSを使用することを好むからです。パス、エクスポートは module.exports グローバルを介して行われます。
これで、liferay-npm-bundlerがAMDのJavaScriptモジュールをどのようにフォーマットするかについて理解を深めることができました。