SharePoint Framework-ToolketteSharePoint Framework toolchain

Die SharePoint Framework-Toolkette ist eine Sammlung von Buildtools, Frameworkpaketen und anderen Elementen, mit denen Sie clientseitige Projekte erstellen und bereitstellen können.The SharePoint Framework toolchain is the set of build tools, framework packages, and other items that manage building and deploying your client-side projects.

Die Toolkette:The toolchain:

  • Die Toolkette unterstützt Sie bei der Erstellung clientseitiger Komponenten wie Webparts.Helps you build client-side components such as web parts.
  • Sie ermöglicht es Ihnen mit Tools wie der SharePoint Workbench, diese Komponenten in Ihrer lokalen Entwicklungsumgebung zu testen.Helps you test client-side components in your local development environment by using tools such as the SharePoint Workbench.
  • Sie ermöglicht das Packen und Bereitstellen in SharePoint.Enables you to package and deploy to SharePoint.
  • Sie stellt verschiedene Buildbefehle für wichtige Buildtasks zur Verfügung, darunter unter anderem Befehle für die Codekompilierung und für das Packen clientseitiger Projekte in SharePoint-App-Pakete.Provides you with a set of build commands that help you complete key build tasks such as code compilation, packaging the client-side project into a SharePoint app package, and more.

Verwenden von npm-PaketenUse npm packages

Bevor wir auf die verschiedenen Komponenten der Toolkette eingehen, ist es wichtig, dass Sie verstehen, wie das SharePoint Framework npm zur Verwaltung der verschiedenen Module innerhalb eines Projekts verwendet. npm ist einer der bevorzugten Open Source-Paket-Manager für clientseitige JavaScript-Entwicklung.Before diving into the various toolchain components, it’s important to understand how the SharePoint Framework uses npm to manage different modules in the project. npm is one of the preferred open source package managers for JavaScript client-side development.

Ein typisches npm-Paket besteht aus einer oder mehreren wiederverwendbaren JavaScript-Codedateien (Modulen) sowie einer Liste von Abhängigkeitspaketen.A typical npm package consists of one or more reusable JavaScript code files, called modules, along with a list of dependency packages. Wenn Sie ein solches Paket installieren, installiert npm auch diese Abhängigkeiten.When you install the package, npm also installs those dependencies.

Das offizielle npm-Repository enthält Hunderte Pakete, die Sie herunterladen und zur Erstellung von Anwendungen verwenden können.The official npm registry consists of hundreds of packages that you can download to build your application. Sie können auch eine Pakete auf npm veröffentlichen und damit anderen Entwicklern zur Verfügung stellen.You can also publish your own packages to npm and share them with other developers. Das SharePoint Framework verwendet verschiedene npm-Pakete in der Toolkette und veröffentlicht auch eigene Pakete im npm-Repository.The SharePoint Framework uses some of the npm packages in the toolchain and also publishes its own packages to the npm registry.

SharePoint Framework-PaketeSharePoint Framework packages

Das SharePoint Framework besteht aus mehreren npm-Paketen, die ineinandergreifen und Sie bei der Erstellung clientseitiger Lösungen für SharePoint unterstützen.The SharePoint Framework consists of several npm packages that work together to help you build client-side experiences in SharePoint.

Folgende npm-Pakete sind im SharePoint Framework enthalten:The following npm packages are in the SharePoint Framework:

  • @microsoft/generator-sharepoint.@microsoft/generator-sharepoint. Ein Yeoman-Plug-In zur Verwendung mit dem SharePoint Framework.A Yeoman plug-in for use with the SharePoint Framework. Mit diesem Generator können Entwickler schnell neue Projekte für clientseitige Webparts mit sinnvollen Standardeinstellungen und Best Practices aufsetzen.Using this generator, developers can quickly set up a new client-side web part project with sensible defaults and best practices.

  • @microsoft/sp-client-base.@microsoft/sp-client-base. Definiert die Kernbibliotheken für clientseitige Anwendungen, die mit dem SharePoint Framework erstellt werden.Defines the core libraries for client-side applications built using the SharePoint Framework.

  • @microsoft/sp-webpart-workbench.@microsoft/sp-webpart-workbench. Die SharePoint Workbench ist eine eigenständige Umgebung, in der clientseitige Webparts getestet und debuggt werden können.The SharePoint Workbench is a standalone environment for testing and debugging client-side web parts.

  • @microsoft/sp-module-loader.@microsoft/sp-module-loader. Ein Modulladeprogramm, das die Versionsverwaltung für clientseitige Komponenten, Webparts und andere Objekte übernimmt und diese lädt.A module loader that manages versioning and loading of client-side components, web parts, and other assets. Es stellt auch grundlegende Diagnosedienste bereit.It also provides basic diagnostic services. Das Programm basiert auf bekannten Standards wie SystemJS und WebPack und ist die erste SharePoint Framework-Komponente, die auf einer Seite geladen wird.It is built on familiar standards such as SystemJS and webpack, and is the first part of the SharePoint Framework to load on a page.

  • @microsoft/sp-module-interfaces.@microsoft/sp-module-interfaces. Definiert verschiedene Modulschnittstellen, die vom SharePoint Framework-Modulladeprogramm und dem SharePoint Framework-Buildsystem gemeinsam genutzt werden.Defines several module interfaces that are shared by the SharePoint Framework module loader and also the build system.

  • @microsoft/sp-lodash-subset.@microsoft/sp-lodash-subset. Stellt ein benutzerdefiniertes lodash-Bundle bereit, das mit dem SharePoint Framework-Modulladeprogramm verwendet werden kann.Provides a custom bundle of lodash for use with the SharePoint Framework's module loader. Für bessere Leistung zur Laufzeit enthält es zudem einige der essenziellsten Lodash-Funktionen.To improve runtime performance, it only includes a subset of the most essential lodash functions.

  • @microsoft/sp-tslint-rules.@microsoft/sp-tslint-rules. Definiert benutzerdefinierte tslint-Regeln zur Verwendung in clientseitigen SharePoint-Projekten.Defines custom tslint rules for usage with SharePoint client-side projects.

  • @microsoft/office-ui-fabric-react-bundle.@microsoft/office-ui-fabric-react-bundle. Stellt ein benutzerdefiniertes office-ui-fabric-react-Bundle bereit, das für die Verwendung mit dem SharePoint Framework-Modulladeprogramm optimiert wurde.Provides a custom bundle of office-ui-fabric-react that is optimized for use with the SharePoint Framework's module loader.

Gängige BuildtoolpaketeCommon build tool packages

Neben den SharePoint Framework-Paketen werden für Buildtasks wie die Kompilierung von TypeScript-Code in JavaScript und die Konvertierung von SCSS in CSS auch verschiedene weitere gängige Buildtools verwendet.Along with the SharePoint Framework packages, a common set of build tools are also used to perform build tasks such as compiling TypeScript code to JavaScript and converting SCSS to CSS.

Die folgenden npm-Pakete gängiger Buildtools sind im SharePoint Framework enthalten:The following common npm build tools packages are in the SharePoint Framework:

Erstellen eines Gerüsts für ein neues clientseitiges ProjektScaffold a new client-side project

Der SharePoint-Generator erstellt ein Gerüst für ein clientseitiges Webpart-Projekt. Zudem lädt der Generator die erforderlichen Toolkettenkomponenten für das jeweilige clientseitige Projekt herunter und konfiguriert sie.The SharePoint generator scaffolds a client-side project with a web part. The generator also downloads and configures the required toolchain components for the specified client-side project.

Installieren von npm-PaketenInstall npm packages

Der Generator installiert erforderliche npm-Pakete lokal im Projektordner.The generator installs required npm packages locally in the project folder. Mit npm können Sie ein Paket entweder lokal in Ihr Projekt oder global installieren.npm allows you to install a package either locally to your project or globally. Beide Varianten haben Vorteile, die generelle Empfehlung ist jedoch, die npm-Pakete lokal zu installieren, wenn der Code von diesen Paketmodulen abhängt.There are benefits to both, but the general guidance is to install the npm packages locally if your code depends on those package modules. Bei einem Webpart-Projekt hängt der Webpart-Code von den verschiedenen SharePoint-Buildpaketen und anderen gängigen Buildpaketen ab. Diese Pakete müssen daher lokal installiert werden.In the case of a web part project, your web part code depends on the various SharePoint and common build packages, and thus requires those packages to be installed locally.

Bei der lokalen Installation der Pakete installiert npm auch die Abhängigkeiten jedes Pakets.As the packages are installed locally, npm also installs the dependencies associated with each package. Die installierten Pakete finden Sie im Ordner node_modules im Projektordner.You can find the packages installed under the node_modules folder in your project folder. Dieser Ordner enthält die Pakete sowie alle ihre Abhängigkeiten.This folder contains the packages along with all their dependencies. Im Idealfall sollte dieser Ordner mehrere Dutzend bis mehrere Hundert Ordner enthalten, da npm-Pakete immer in kleinere Module aufgeteilt werden und daher mehrere Dutzend bis mehrere Hundert Pakete installiert werden.It is ideal that this folder contains dozens to hundreds of folders, because npm packages are always broken down to smaller modules, which results in dozens to hundreds of packages being installed. Die wichtigsten SharePoint Framework-Pakete liegen im Ordner node_modules\@microsoft.The key SharePoint Framework packages are located under the node_modules\@microsoft folder. @microsoft ist ein npm-Bereich, der von Microsoft veröffentlichte Pakete abbildet.The @microsoft is an npm scope that collectively represents packages published by Microsoft.

Immer, wenn ein neues Projekt mit dem Generator erstellt wird, installiert der Generator die SharePoint Framework-Pakete für das jeweilige Projekt samt ihrer Abhängigkeiten lokal. So macht npm es einfacher, Webpart-Projekte zu verwalten, ohne dass es Auswirkungen auf andere Projekte in der lokalen Entwicklungsumgebung gibt.Every time you create a new project using the generator, the generator installs the SharePoint Framework packages along with its dependencies for that specific project locally. In this way, npm makes it easier to manage your web part projects without affecting other projects in the local dev environment.

Angeben von Abhängigkeiten mit package.jsonSpecify dependencies with package.json

Die Datei package.json im clientseitigen Projekt enthält eine Liste der Abhängigkeiten des Projekts.The package.json file in the client-side project specifies the list of dependencies the project depends on. Diese Liste definiert, welche Abhängigkeiten installiert werden müssen.The list defines what dependencies to install. Wie zuvor beschrieben, kann jede Abhängigkeit noch einige weitere Abhängigkeiten enthalten.As described earlier, each dependency could contain several more. Mit npm können Sie sowohl Laufzeit- als auch Buildabhängigkeiten für Ihr Paket mithilfe der Eigenschaften dependencies und devDependencies definieren.npm allows you to define both runtime and build dependencies for your package by using the dependencies and devDependencies properties. Die Eigenschaft devDependencies kommt zum Einsatz, wenn das jeweilige Modul im Code verwendet werden soll. Das ist beispielsweise bei der Erstellung von Webparts der Fall.The devDependencies property is used when you want to use that module in your code as in the case of building web parts.

Nachfolgend sehen Sie die Datei package.json für das helloworld-Webpart:The following is the package.json of the helloworld-webpart.

{
  "name": "helloword-webpart",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-client-base": "~1.0.0",
    "@microsoft/sp-core-library": "~1.0.0",
    "@microsoft/sp-webpart-base": "~1.0.0",
    "@types/webpack-env": ">=1.12.1 <1.14.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.0.0",
    "@microsoft/sp-module-interfaces": "~1.0.0",
    "@microsoft/sp-webpart-workbench": "~1.0.0",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  }
}

Zwar werden für ein Projekt sehr viele Pakete installiert; sie sind aber nur für die Erstellung des Webparts in der Entwicklungsumgebung erforderlich.While there are lot of packages installed for the project, they are required only for building the web part in the dev environment. Mithilfe dieser Pakete können Sie alle nötigen Module und Abhängigkeiten implementieren, um Ihr Webpart zu erstellen, es zu kompilieren, ein Bundling für es durchzuführen und es für die Bereitstellung zu packen.With the help of these packages, you can depend on the modules, and you can build, compile, bundle, and package your web part for deployment. Die finale und minimierte Bundle-Version des Webparts, die Sie auf einem CDN-Server oder auf SharePoint bereitstellen, enthält keines dieser Pakete.The final minified bundled version of the web part that you deploy to a CDN server or SharePoint does not include any of these packages. Allerdings können Sie Ihr Webpart je nach den konkreten Anforderungen auch so konfigurieren, dass es bestimmte Module enthält.That said, you can also configure to include certain modules depending on your requirements. Weitere Informationen finden Sie unter Add an external library to a web part.For more information, see Add an external library to a web part.

Arbeiten mit QuellcodeverwaltungssystemenWork with source control systems

Je mehr Projektabhängigkeiten es gibt, desto mehr Pakete müssen installiert werden.As project dependencies increase, the number of packages to install also increases. Es empfiehlt sich nicht, den Ordner node_modules in das Quellcodeverwaltungssystem einzuchecken, da er alle Abhängigkeiten enthält.You don’t want to check in the node_modules folder, which contains all the dependencies, to your source control system. Sie sollten den Ordner node_modules in die Liste der Dateien aufnehmen, die beim Einchecken ignoriert werden.You should exclude the node_modules from the list of files to ignore during check-ins.

Wenn Sie git als Quellcodeverwaltungssystem verwenden: Webpart-Projekte mit Yeoman-Gerüst enthalten eine Datei .gitignore, die den Ordner node_modules und andere Elemente vom Einchecken ausschließt.If you are using git as your source control system, the Yeoman scaffolded web part project includes a .gitignore file that excludes the node_modules folder, among other things.

Beim ersten Auschecken oder Klonen eines Webpart-Projekts aus dem Quellcodeverwaltungssystem müssen Sie den Befehl zur Initialisierung und lokalen Installation aller Projektabhängigkeiten ausführen:When you check out, or clone, the web part project from your source control system the first time, run the command to initialize and install all the project dependencies locally:

npm i

Nach dem Ausführen des Befehls überprüft npm die Datei package.json und installiert die erforderlichen Abhängigkeiten.After you run the command, npm scans the package.json file and installs the required dependencies.

BuildtasksBuild tasks

Das SharePoint Framework verwendet gulp zur Taskausführung. gulp bearbeitet Prozesse wie die folgenden:The SharePoint Framework uses gulp as its task runner to handle processes like the following:

  • Bundling und Minimieren von JavaScript- und CSS-DateienBundle and minify JavaScript and CSS files.
  • Ausführen von Tools zum Aufrufen der Bündelungs- und Minimierungstasks vor jedem BuildRun tools to call the bundling and minification tasks before each build.
  • Kompilieren von LESS- oder SASS-Dateien in CSSCompile LESS or Sass files to CSS.
  • Kompilieren von TypeScript-Dateien in JavaScriptCompile TypeScript files to JavaScript.

Die Toolkette besteht aus den folgenden gulp-Tasks, die im Paket @microsoft/sp-build-core-tasks definiert sind:The toolchain consists of the following gulp tasks defined in the @microsoft/sp-build-core-tasks package:

  • build: Erstellt das clientseitige Lösungsprojekt.build - Builds the client-side solution project.
  • bundle: Bündelt den Einstiegspunkt des clientseitigen Lösungsprojekts sowie alle seine Abhängigkeiten in einer einzigen JavaScript-Datei.bundle - Bundles the client-side solution project entry point and all its dependencies into a single JavaScript file.
  • serve: Liefert das clientseitige Lösungsprojekt sowie andere Objekte vom lokalen Rechner aus.serve - Serves the client-side solution project and assets from the local machine.
  • clean: Löscht die Buildartefakte des clientseitigen Lösungsprojekts aus dem vorherigen Build und den Buildzielverzeichnissen („lib“ und „dist“).clean - Cleans the client-side solution project's build artifacts from the previous build and from the build target directories (lib and dist).
  • test: Führt Einheitentests für das clientseitige Lösungsprojekt durch (falls verfügbar).test - Runs unit tests, if available, for the client-side solution project.
  • package-solution: Packt die clientseitige Lösung in ein SharePoint-Paket.package-solution - Packages the client-side solution into a SharePoint package.
  • deploy-azure-storage: Stellt die Objekte des clientseitigen Lösungsprojekts in Azure Storage bereit.deploy-azure-storage - Deploys client-side solution project assets to Azure Storage.

Zur Initiierung der Tasks hängen Sie den Tasknamen an den gulp-Befehl an. Wenn Sie zum Beispiel Ihr Webpart kompilieren und eine Vorschau in der SharePoint Workbench anzeigen wollen, führen Sie den folgenden Befehl aus:To initiate different tasks, append the task name with the gulp command. For example, to compile and then preview your web part in the SharePoint Workbench, run the following command:

gulp serve

Hinweis

Es lassen sich nicht mehrere Tasks gleichzeitig ausführen.You cannot execute multiple tasks at the same time.

serve führt die verschiedenen Tasks aus und startet im Anschluss SharePoint Workbench.The serve task runs the different tasks and finally launches SharePoint Workbench.

Task „gulp serve“

BuildzieleBuild targets

Im Screenshot oben sehen Sie, dass der Task folgendes Buildziel setzt:In the previous screenshot, you can see that the task indicates your build target as follows:

Build target: DEBUG

Wird kein Parameter angegeben, setzen die Befehle automatisch den BUILD-Modus als Ziel.If no parameter is specified, the commands target the BUILD mode. Wenn Sie den Parameter ship angeben, setzen die Befehle den SHIP-Modus als Ziel.If the ship parameter is specified, the commands target the SHIP mode.

In der Regel setzen Sie SHIP als Ziel, wenn das Webpart-Projekt zur Auslieferung an oder Bereitstellung auf einem Produktionsserver bereit ist.Usually, when your web part project is ready to ship or deploy in a production server, you target SHIP. Für andere Szenarien wie Tests und Debugging würden Sie BUILD als Ziel setzen.For other scenarios, such as testing and debugging, you would target BUILD. Das Ziel SHIP stellt auch sicher, dass die minimierte Version des Webpart-Bundles erstellt wird.The SHIP target also ensures that the minified version of the web part bundle is built.

Um den SHIP-Modus als Ziel zu setzen, hängen Sie --ship an den Task an:To target SHIP mode, append the task with --ship:

gulp --ship

Im DEBUG-Modus kopieren die Buildtasks alle Webpart-Objekte inklusive des Webpart-Bundles in den Ordner dist.In DEBUG mode, the build tasks copy all of the web part assets, including the web part bundle, into the dist folder.

Im SHIP-Modus kopieren die Buildtasks alle Webpart-Objekte inklusive des Webpart-Bundles in den Ordner temp\deploy.In SHIP mode, the build tasks copy all of the web part assets, including the web part bundle, into the temp\deploy folder.

Siehe auchSee also