外部JavaScriptライブラリの使用

外部JavaScriptライブラリの使用

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

ポートレットで外部JavaScriptライブラリを使用できます(つまり、デフォルトで含まれているMetal.js、jQuery、またはLodash以外のもの)。 外部ライブラリを利用可能にするために使用できる方法がいくつかあります。 選択する方法は、使用する予定の外部ライブラリとそれらの使用方法によって異なります。

このチュートリアルでは、JavaScriptローダーに外部ライブラリを適応させる方法について説明します。

UMDをサポートするためのライブラリの構成

ライブラリの所有者である場合、 UMD (ユニバーサルモジュール定義)をサポートしていることを確認する必要があります。 以下に示すテンプレートを使用して、UMDをサポートするようにコードを構成できます。

// Assuming your "module" will be exported as "mylibrary"
(function (root, factory) {
    if (typeof Liferay.Loader.define === 'function' && Liferay.Loader.define.amd) {
        // AMD. Register as a "named" module.
        Liferay.Loader.define('mylibrary', [], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.mylibrary = factory();
  }
}(this, function () {

    // Your library code goes here
    return {};
}));

次に、ホストするライブラリの使用方法を学習できます。

ホストするライブラリを使用する

ライブラリをホストしている(CDNからロードしていない)場合、Liferay AMD Loaderを非表示にしてライブラリを使用する必要があります。 次の手順を実行します:

  1. コントロールパネルを開き、 構成システム設定ます。

  2. PlatformInfrastructure下の JavaScript Loader クリックします。

  3. 公開グローバル オプションをオフにします。

これで、LiferayのJavaScriptローダーに外部ライブラリを適応させる方法がわかりました。

関連トピック

Liferay AMDモジュールローダー

ポートレットでES2015 +モジュールを使用する

« LiferayでAMDモジュールをロードするAUIスクリプトを使用したモジュールのロード »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています