Bibliothèques dépendantes (version préliminaire)

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Avec les applications pilotées par modèle, vous pouvez réutiliser une bibliothèque prédéfinie contenue dans un autre composant qui est chargée en tant que dépendance à plusieurs composants.

Il n’est pas souhaitable d’avoir des copies d’une bibliothèque prédéfinie dans plusieurs contrôles. La réutilisation des bibliothèques existantes améliore les performances, en particulier lorsque la bibliothèque est volumineuse, en réduisant le temps de chargement de tous les composants qui utilisent la bibliothèque. La réutilisation des bibliothèques aide également à réduire les frais de maintenance dans les processus de création.

Avant le

Après

Pour utiliser des bibliothèques dépendantes, vous devez :

• Créez un Composant de bibliothèque qui contient la bibliothèque. Ce composant peut fournir certaines fonctionnalités ou n’être qu’un conteneur pour la bibliothèque.
• Configurez un autre composant pour qu’il dépende de la bibliothèque chargée par le composant de bibliothèque.

Par défaut, la bibliothèque se charge lorsque le composant dépendant se charge, mais vous pouvez la configurer pour qu’elle se charge à la demande.

De cette façon, vous pouvez gérer indépendamment la bibliothèque dans le contrôle de bibliothèque et les contrôles dépendants n’ont pas besoin d’avoir une copie de la bibliothèque fournie avec eux.

Fonctionnement

Vous devez ajouter des données de configuration à votre projet de composant afin que le processus de génération déploie vos bibliothèques comme vous le souhaitez. Définissez ces données de configuration en ajoutant ou en modifiant les fichiers suivants :

• featureconfig.json
• webpack.config.js
• Modifier le schéma du manifeste pour Enregistrer les dépendances

featureconfig.json

Ajoutez ce fichier pour remplacer les indicateurs de fonctionnalité par défaut d’un composant sans modifier les fichiers générés dans le dossier node_modules.

Le tableau suivant décrit les indicateurs de fonctionnalité que vous pouvez définir dans featureconfig.json :

Nonm	Description
pcfResourceDependency	Permet au composant d’utiliser une ressource de bibliothèque.
pcfAllowCustomWebpack	Permet au composant d’utiliser un pack web personnalisé. Cette fonctionnalité doit être activée pour les composants qui définissent une ressource de bibliothèque.

Par défaut, ces valeurs sont off. Définissez-les sur on pour remplacer la valeur par défaut. Par exemple :

{ 
  "pcfAllowCustomWebpack": "on" 
} 

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

webpack.config.js

Le processus de création des composants utilise Webpack pour regrouper le code et les dépendances en une ressource déployable. Pour exclure vos bibliothèques de ce groupe, ajoutez un fichier webpack.config.js au dossier racine du projet qui spécifie l’alias de la bibliothèque comme externals. En savoir plus sur l’option de configuration des composants externes Webpack

Ce fichier peut ressembler à ce qui suit lorsque l’alias de la bibliothèque est myLib.

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

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

Enregistrer les dépendances

Utilisez l’élément de dépendance au sein des ressources du schéma du manifeste.

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

Dépendance en tant que charge à la demande d’un composant

Plutôt que de charger la bibliothèque dépendante lors du chargement d’un composant, vous pouvez charger la bibliothèque dépendante à la demande. Le chargement à la demande offre la flexibilité aux contrôles plus complexes de ne charger les dépendances que lorsqu’elles sont nécessaires, en particulier si les bibliothèques dépendantes sont volumineuses.

Pour activer le chargement à la demande, vous devez :

1. Ajoutez ces éléments enfants élément platform-action, élément feature-usage et élément uses-feature à l’élément de contrôle :

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

2. Définissez l’attribut load-type de l’élément de dépendance sur onDemand.

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

Étapes suivantes

Essayez un didacticiel qui vous guide tout au long de la création d’une bibliothèque dépendante.

Didacticiel : Utiliser les bibliothèques dépendantes dans un composant