LiferayでAMDモジュールをロードする

LiferayでAMDモジュールをロードする

ファストトラック記事は、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

モジュール化されたJavaScriptコードは、非同期モジュール定義(AMD)と呼ばれるJavaScript言語の仕様です。 Liferay AMD Module Loader は、AMDモジュールのロードに使用できるネイティブローダーです。 このチュートリアルでは、Liferay AMD Module Loaderの使用方法について説明します。

ローダー用のAMDモジュールの構成

次の手順に従って、モジュールを準備します。

  1. AMDモジュールコードを、以下に示すような Liferay.Loader.define() メソッドでラップします。

    Liferay.Loader.define('my-dialog', ['my-node', 'my-plugin-base'], 
    function(myNode, myPluginBase) {
       return {
           log: function(text) {
               console.log('module my-dialog: ' + text);
           }
       };
    });
    
  2. 別のモジュールがトリガーされたとき、または条件が満たされたときにモジュールをロードするように構成を変更できます。 以下の構成では、開発者が my-test モジュールを要求した場合にこのモジュールをロードするように指定しています。

    Liferay.Loader.define('my-dialog', ['my-node', 'my-plugin-base'], 
    function(myNode, myPluginBase) {
       return {
           log: function(text) {
               console.log('module my-dialog: ' + text);
           }
       };
    }, {
       condition: {
           trigger: 'my-test',
           test: function() {
               var el = document.createElement('input');
    
               return ('placeholder' in el);
           }
       },
       path: 'my-dialog.js'
    });
    

    Liferay AMD Loaderは、定義と、リストされた依存関係、および指定された他の構成を使用して、 config.json ファイルを作成します。 この構成オブジェクトは、使用可能なモジュール、モジュールの場所、必要な依存関係をローダーに伝えます。 以下は、生成された config.json ファイルの例です。

    {
        "frontend-js-web@1.0.0/html/js/parser": {
            "dependencies": []
        },
        "frontend-js-web@1.0.0/html/js/list-display": {
            "dependencies": ["exports"]
        },
        "frontend-js-web@1.0.0/html/js/autocomplete": {
            "dependencies": ["exports", "./parser", "./list-display"]
        }
    }
    
  3. モジュールをスクリプトにロードします。 モジュール名を Liferay.Loader.require メソッドに渡します。 以下の例は、 my-dialogというモジュールをロードします。

    Liferay.Loader.require('my-dialog', function(myDialog) {
        // your code here
    }, function(error) {
        console.error(error);
    });
    

関連トピック

AUIスクリプトを使用したモジュールのロード

ポートレットでnpmを使用する

« JavaScriptモジュールローダー外部JavaScriptライブラリの使用 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています