依存ライブラリ (プレビュー)

[このトピックはプレリリース ドキュメントであり、変更されることがあります。]

モデル駆動型アプリを使用すると、複数のコンポーネントへの依存関係として読み込まれる別のコンポーネントに含まれる事前構築済みライブラリを再利用できます。

事前構築済みのライブラリのコピーを複数のコントロールに含めることは望ましくありません。 既存のライブラリを再利用すると、ライブラリを使用するすべてのコンポーネントの読み込み時間が短縮されるため、特にライブラリが大きい場合にパフォーマンスが向上します。 ライブラリの再利用は、ビルド プロセスにおけるメンテナンスのオーバーヘッドの削減にも役立ちます。

依存ライブラリを使用するには、次の操作を行う必要があります。

• ライブラリを含む ライブラリ コンポーネント を作成します。 このコンポーネントは、一部の機能を提供することも、ライブラリのコンテナにすることもできます。
• ライブラリコンポーネントによってロードされたライブラリに依存するように、別のコンポーネントを構成します。

既定では、ライブラリは依存コンポーネントが読み込まれるときに読み込まれますが、オンデマンドで読み込まれるように構成することもできます。

この方法では、ライブラリ コントロールでライブラリを個別に管理でき、依存コントロールにライブラリのコピーをバンドルする必要がなくなります。

使用方法

構成データをコンポーネント プロジェクトに追加して、ビルド プロセスでライブラリが希望どおりにデプロイされるようにする必要があります。 この構成データを設定するには、次のファイルを追加または編集します。

• featureconfig.json
• webpack.config.js
• マニフェスト スキーマを編集して、依存関係を登録する

featureconfig.json

このファイルを追加すると、node_modules フォルダーに生成されたファイルを変更せずに、コンポーネントの既定の機能フラグがオーバーライドされます。

次のテーブルは、featureconfig.json で設定できる機能フラグについて説明しています。

既定では、この値は off です。 これらを on に設定して既定をオーバーライドします。 例:

{ 
  "pcfAllowCustomWebpack": "on" 
} 

{ 
   "pcfResourceDependency": "on",
   "pcfAllowCustomWebpack": "off" 
} 

webpack.config.js

コンポーネントのビルド プロセスでは、Webpack を使用して、コードと依存関係をデプロイ可能なアセットにバンドルします。 このバンドルからライブラリを除外するには、ライブラリのエイリアスを webpack.config.js として指定するプロジェクトのルート フォルダーに externals ファイルを追加します。 Webpack の外部構成オプションの詳細

このファイルは、ライブラリ エイリアスが myLib の場合、次のようになります。

/* eslint-disable */ 
"use strict"; 

module.exports = { 
  externals: { 
    "myLib": "myLib" 
  }, 
}  

依存関係を登録する

マニフェスト スキーマの リソース内にある依存関係要素を使用します。

<resources>
  <dependency
    type="control"
    name="samples_SampleNS.SampleStubLibraryPCF"
    order="1"
  />
  <code path="index.ts" order="2" />
</resources>

コンポーネントがオンデマンドでロードする依存関係

コンポーネントのロード時に依存ライブラリをロードするのではなく、オンデマンドで依存ライブラリをロードできます。 オンデマンド読み込みでは、特に依存ライブラリが大きい場合に、必要な場合にのみ依存関係を読み込むという、より複雑なコントロールの柔軟性が提供されます。

オンデマンド読み込みを有効にするには、次の操作を行う必要があります。

1. プラットフォーム-アクション要素、機能-使用要素、および使用-機能要素、子要素をコントロール要素に追加します。

   <platform-action action-type="afterPageLoad" />
   <feature-usage>
      <uses-feature name="Utility"
         required="true" />
   </feature-usage>
   

2. 依存関係要素のload-type属性を onDemand に設定します。

   <dependency type="control"
         name="samples_SampleNamespace.StubLibrary"
         load-type="onDemand" />
   

次の手順

依存ライブラリの作成を順を追って説明するチュートリアルを試してください。