Erstellen von Lösungen mit dem Bibliothekskomponententyp im SharePoint-Framework

Artikel
03/21/2023

In diesem Lernprogramm erstellen Sie eine SharePoint-Framework (SPFx)-Bibliothekskomponente und verwenden sie in einem clientseitigen Webpart.

Erstellen einer Drittanbieter-SPFx-Bibliothek

Erstellen Sie am gewünschten Speicherort ein neues Projektverzeichnis.
```
md corporate-library
```
Navigieren Sie zum Projektverzeichnis.
```
cd corporate-library
```
Führen Sie den Yeoman-SharePoint-Generator aus, um eine neue Bibliothek zu erstellen.
```
yo @microsoft/sharepoint
```
Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):
- Möchten Sie dem Mandantenadministrator erlauben, festzulegen, ob die Lösung unmittelbar für alle Websites bereitgestellt wird, ohne die Bereitstellung von Features oder das Hinzufügen von Apps zu Websites? Ja
- Welcher Typ von clientseitiger Komponente soll erstellt werden? : Bibliothek
- Wie lautet der Name Ihrer Bibliothek?: CorporateLibrary
- Wie lautet die Beschreibung Ihrer Bibliothek?: CorporateLibrary description
Nachdem das Gerüst für das Projekt erstellt wurde, sehen Sie, dass die Bibliothek mit einer Datei index.ts erstellt wird, die einen Export aus der erstellten CorporateLibrary enthält.
Öffnen Sie die Projektmappe in Ihrem bevorzugten Editor, und gehen Sie zu src\corporateLibrary\CorporateLibraryLibrary.ts

Sie werden bemerken, dass eine Standardmethode (name()) erstellt wurde. Benennen Sie die Methode wie folgt um:

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

Führen Sie gulp in einer Eingabeaufforderung aus, um zu bestätigen, dass alle Elemente ordnungsgemäß erstellt werden.

Nutzen einer Drittanbieter-SPFx Bibliothek (für lokale Tests)

Führen Sie gulp bundle --ship aus dem Stammverzeichnis der Bibliothekslösung aus. eine einfache gulp build funktioniert nicht.
Führen Sie npm link aus dem Stammverzeichnis der Bibliothekslösung aus. In diesem Fall würde dies aus dem corporate-library-Ordner erfolgen.
Wenn Sie den symbolischen Link zu Ihrer neuen SPFx-Bibliothekskomponente erstellt haben, vergessen Sie nicht, mindestens einmal gulp build auszuführen. Kompilieren Sie die Bibliothekskomponente mindestens einmal, um sie in ein anderes Projekt importieren zu können. Denken Sie daran, dass der package.json angibt, dass "main": "lib/index.js", daher muss dieser Speicherort vor jedem Import-versuch vorhanden.
Dadurch wird ein lokaler npm-Link zur Bibliothek mit dem in package.json angegebenen Namen erstellt.
Erstellen Sie ein Webpartprojekt in einem separaten Projektordner (also nicht in der Bibliotheksprojekt-Ordnerstruktur), indem Sie die hier beschriebenen Anweisungen befolgen. Nennen Sie das Webpart CorporateWebPart.
Führen Sie aus dem Stamm des neuen Webpartordners den Befehl npm link corporate-library aus.
Dadurch wird eine symbolische Verknüpfung mit dieser lokal erstellten Bibliothek im Webpart erstellt und für Ihr Webpart zur Verfügung gestellt.
Öffnen Sie die Webpartlösung in Ihrem bevorzugten Editor, und gehen Sie zu src\webparts\corporateWebPart\CorporateWebPartWebPart.ts.
Fügen Sie einen Import hinzu, um auf Ihre Bibliothek zu verweisen:
```
import * as myLibrary from 'corporate-library';
```

Ändern Sie die render()-Methode wie folgt:

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>`;
}

Beachten Sie, dass wir eine neue Instanz der Bibliothek erstellen und dann auf die getCurrentTime()-Methode verweisen, um die aktuelle Uhrzeitzeichenfolge aus der Bibliothek abzurufen.

Testen Sie Ihr Webpart, indem Sie die lokale Workbench starten und der Seite das Webpart hinzufügen:
```
gulp serve
```

Bereitstellen und Nutzen einer Drittanbieter-SPFx-Bibliothek aus dem Mandanten-App-Katalog

Navigieren Sie zum corporate-library-Stammordner, um die Lösung zu bündeln und zu verpacken:
```
gulp bundle --ship
gulp package-solution --ship
```
Dadurch werden alle lokalen Änderungen erstellt und die Projektmappe in eine *.sppkg-Datei im Ordner sharepoint/solution verpackt.
Stellen Sie dieses Paket im Mandanten-App-Katalog bereit, und machen Sie es durch Aktivieren der Option Diese Lösung an allen Standorten der Organisation verfügbar machen mandantenweit verfügbar.
Navigieren Sie zum Ordner der Webpartlösung, und öffnen Sie die Datei package.json.
Fügen Sie wie folgt einen Eintrag hinzu, um den Bibliothekseintrag und seine Version im Abschnitt dependencies anzugeben (Sie finden dies in der Datei package.json der zuvor erstellten Bibliothekslösung):
```
"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"
},
```
Hinweis

npm install löst einen Fehler aus, wenn Sie ein Webpart erstellen und nur einen Verweis auf package.json hinzugefügt haben, jedoch keinen lokalen Verweis mit npm link erstellen. Wenn Sie einen Link mit npm link erstellt haben und npm install ausführen, wird während npm install keine Fehlermeldung angezeigt, der symbolische Link wird jedoch entfernt. Wenn Sie npm install ausführen möchten, müssen Sie den Verweis auf die Unternehmensbibliothek vorübergehend entfernen und den Verweis dann durch Ausführen von npm link corporate-library und Aktualisieren des Verweises in package.json wiederherstellen.

Erstellen des Webparts:

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

Fügen Sie die Webpartlösung dem Mandanten-App-Katalog hinzu.
Fügen Sie das neu hinzugefügte Webpart einer Seite hinzu und beachten Sie, dass die Bibliothek den Funktionen des Webparts automatisch zur Verfügung gestellt wird.
Wenn Sie Änderungen an der Bibliothek vornehmen und die Bibliothek erneut im App-Katalog veröffentlichen, wird das Webpart automatisch aktualisiert, ohne dass das Webpart erneut erstellt oder veröffentlicht werden muss.

So heben Sie die Verknüpfung mit der SPFx-Bibliothek auf

Um die Verknüpfung mit der SPFx-Bibliothek aufzuheben, die während der Entwicklung mit Ihrem SPFx-Projekt symbolisch verlinkt wurde, wechseln Sie in den Stammordner des SPFx-Projekts und führen Sie den Befehl aus.

npm unlink corporate-library

So überprüfen Sie, in welchem Ordner die SPFx-Bibliothek gespeichert ist.

npm ls -g 'corporate-library'

Zum Entfernen des lokalen NPM-Links zur-Bibliothek, wechseln Sie in den Stammordner der SPFx-Bibliothek und führen Sie den Befehl aus.

npm unlink

Siehe auch

Verwenden des Bibliothekskomponententyps im SharePoint-Framework

Freigeben über