À l’aide du type de composant bibliothèque dans SharePoint Framework

Article
06/29/2022

Dans ce tutoriel, vous allez créer un composant de bibliothèque SharePoint Framework (SPFx) et l'utiliser dans un composant Web côté client.

Comment créer une bibliothèque de SPFx tierce

Créez un nouveau répertoire de projet à l’emplacement de votre choix
```
md corporate-library
```
Accédez au répertoire du projet.
```
cd corporate-library
```
Créez une bibliothèque en exécutant le générateur SharePoint Yeoman.
```
yo @microsoft/sharepoint
```
Lorsque vous y êtes invité, entrez les valeurs suivantes (sélectionnez l’option par défaut pour toutes les invites qui ne sont pas mentionnées ci-dessous):
- Voulez-vous autoriser l’administrateur client à choisir de pouvoir déployer la solution sur tous les sites immédiatement sans exécuter de déploiement de fonctionnalité ni ajouter d’applications sur les sites ? : oui
- Quel type de composant côté client voulez-vous créer ? : Bibliothèque
- Quel est le nom de votre bibliothèque ? : CorporateLibrary
- Quelle est la description de votre bibliothèque ? : CorporateLibrary
Une fois le projet élaboré, vous verrez la bibliothèque créée avec un fichier index.ts contenant une exportation de la bibliothèque CorporateLibrary créée.
Ouvrez la solution dans l’éditeur de votre choix, et accédez à src\corporateLibrary\CorporateLibraryLibrary.ts.

Vous pouvez remarquer qu’une méthode par défaut, name(), a été créée. Mettre à jour la méthode comme suit:

public getCurrentTime(): string {
  return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
}

Exécuter gulp sur l’invitation de commande pour afficher tous les éléments builds correctement.

Comment utiliser une bibliothèque SPFx tierce(pour des tests locaux)

Exécutez gulp bundle --ship à partir du répertoire racine de solution de bibliothèque. un simple gulp build ne fonctionne pas.
Exécutez npm link à partir du répertoire racine de solution de bibliothèque. Dans ce cas, il s’agit du dossier corporate-library.
Juste après avoir créé le lien symbolique vers votre nouveau composant de bibliothèque SPFx, n’oubliez pas d’exécuter au moins une fois gulp build. Compilez votre composant de bibliothèque au moins une fois pour pouvoir l’importer en tant que module dans un autre projet. N’oubliez pas que le fichier package.json stipule "main": "lib/index.js". Par conséquent, cet emplacement doit exister avant toute tentative d’importation.
Cela a pour effet de créer un lien npm vers la bibliothèque du nom spécifié dans le fichier package.json.
Créez un projet de composant WebPart dans un dossier de projet distinct, donc pas dans la structure de dossiers du projet de bibliothèque, en suivant ces instructions.Nommez votre partie web CorporateWebPart.
Depuis la racine du nouveau dossier de composant WebPart, exécutez la commande npm link corporate-library
Cela crée un lien symbolique à cette bibliothèque buit localement prédéfinie dans le composant WebPart et définissez-le disponible à votre composant WebPart.
Ouvrez la solution de composant WebPart dans l’éditeur de votre choix et accédez à src\webparts\corporateWebPart\CorporateWebPartWebPart.ts.
Ajouter une importation pour faire référence à votre bibliothèque :
```
import * as myLibrary from 'corporate-library';
```

Mettre à jour la méthode render() comme suit:

public render(): void {
  const myInstance = new myLibrary.CorporateLibraryLibrary();

  this.domElement.innerHTML = `
  <div class="${ styles.corporateWebPart }">
      <div class="${ styles.container }">
      <div class="${ styles.row }">
          <div class="${ styles.column }">
          <span class="${ styles.title }">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
          <p>${myInstance.getCurrentTime()}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
          </a>
          </div>
      </div>
      </div>
  </div>`;
}

Notez que nous créons une instance de la bibliothèque, puis faisons référence à la méthode getCurrentTime() pour récupérer la chaîne de l’heure actuelle dans la bibliothèque.

Testez votre composant WebPart en lançant la console locale, puis ajoutez-le à la page :
```
gulp serve
```

Comment déployer et utiliser une bibliothèque SPFx tierce à partir du catalogue d’applications du client

Accédez au dossier racine corporate-library, puis regroupez et empaquetez la solution :
```
gulp bundle --ship
gulp package-solution --ship
```
Cela a pour effet de générer les modifications locales et d’empaqueter la solution dans un fichier *.sppkg dans le dossier sharepoint\solution.
Déployez ce package dans le catalogue d’applications du client en faites en sorte qu’il soit déployé à l’échelle du client en activant l’option Mettre à disposition cette solution à tous les sites au sein de l’organisation.
Accédez au dossier de la solution WebPart, puis ouvrez le fichier package.json.
Ajoutez une entrée pour refléter l’entrée de bibliothèque et sa version dans la section dependencies (dans le fichier package.json de la solution de bibliothèque créée précédemment) comme suit :
```
"dependencies": {
  "corporate-library": "0.0.1", // here we added the reference to the library
  "@microsoft/sp-core-library": "1.9.0",
  "@types/webpack-env": "1.13.1",
  "@types/es6-promise": "0.0.33"
},
```
Notes

npm install lève une erreur si vous créez un composant WebPart et venez d’ajouter une référence à package.json sans créer de référence en utilisant npm link. Si vous avez créé un lien en utilisant npm link et exécutez npm installer, aucune erreur ne s’affiche lors de l’exécution de npm install mais le lien symbolique est supprimé. Si vous voulez exécuter npm install, vous devez temporairement supprimer la référence à la bibliothèque d’entreprise, rétablir la référence en exécutant la commande npm link corporate-library, puis mettre à jour la référence dans package.json.

Générer le composant WebPart :

gulp bundle --ship
gulp package-solution --ship

Déployez la solution webPart vers le catalogue d’applications du client.
Ajoutez le composant WebPart nouvellement ajouté à une page. Vous pouvez remarquer que la bibliothèque est automatiquement mise à la disposition des fonctions du composant WebPart.
L’apport de modifications à la bibliothèque et la republication de celle-ci dans le Catalogue d’applications ont pour effet de mettre à jour automatiquement le composant WebPart sans qu’il faille le régénérer/republier.

Comment dissocier une bibliothèque SPFx

Pour dissocier une bibliothèque SPFx qui a été associée par lien symbolique lors du développement de votre projet SPFx, accédez au dossier racine du projet SPFx et exécutez la commande.

npm unlink corporate-library

Pour vérifier l’emplacement du dossier de la bibliothèque SPFx.

npm ls -g 'corporate-library'

Pour supprimer le lien npm local d’accès à la bibliothèque, accédez au dossier racine de la bibliothèque SPFx et exécutez la commande.

npm unlink

Voir aussi

À l’aide du type de composant bibliothèque dans SharePoint Framework

Partager via