SharePoint Framework 开发工具和库SharePoint Framework development tools and libraries

SharePoint Framework 包含多个可用于生成解决方案的客户端 JavaScript 库。本文提供了可用于开发客户端 Web 部件的工具和库的概述。The SharePoint Framework includes several client-side JavaScript libraries that you can use to build your solutions. This article provides an overview of the tools and libraries that you can use to develop client-side web parts.

TypeScriptTypeScript

TypeScript 是键入的 JavaScript 超集,编译为纯 JavaScript。SharePoint 客户端开发工具使用 TypeScript 类、模块和接口生成。可以使用这些工具来构建可靠的客户端 Web 部件。TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces. You can use these to build robust client-side web parts.

若要开始使用 TypeScript,请参阅以下资源:To get started with TypeScript, see the following resources:

JavaScript 框架JavaScript frameworks

可以选择多个 JavaScript 框架中的任意一个来开发客户端 Web 部件。以下是一些最为热门的框架:You can choose any one of a number of JavaScript frameworks to develop client-side web parts. The following are some of the most popular:

由于客户端 Web 部件为置于 SharePoint 页面的组件,我们建议选择一个支持类似组件模型的 JavaScript 框架。轻量级框架(如 React、Handlebars 和 Angular 2)均支持组件模型,很适合构建客户端 Web 部件。Because client-side web parts are components that are dropped into a SharePoint page, we recommend that you choose a JavaScript framework that supports a similar component model. Lightweight frameworks such as React, Handlebars, and Angular 2 all support a component model and are well suited to building client-side web parts.

同时,我们建议查看 SharePoint PnP JavaScript 核心库,这是社区推动的针对在 SharePoint REST API 上提供便捷访问所做的努力。We also recommend that you look at the SharePoint PnP JavaScript Core library, which is a community driven effort targeted for providing easy access on SharePoint REST APIs.

节点包管理器 (npm)Node Package Manager (npm)

SharePoint 客户端开发工具使用与 NuGet 类似的 npm 软件包管理器,以管理依赖项和其他所需的 JavaScript 帮助程序。npm 通常是 Node.js 安装程序的一部分。SharePoint client-side development tools use the npm package manager, which is similar to NuGet, to manage dependencies and other required JavaScript helpers. npm is typically included as part of Node.js setup.

有关 npm 的详细信息,请参阅 npm 文档For more information about npm, see the npm documentation.

Node.jsNode.js

Node.js 是承载和提供 JavaScript 代码的开放源代码、跨平台运行时环境。Node.js is an open source, cross-platform runtime environment for hosting and serving JavaScript code. 可以使用以 JavaScript 编写的 Node.js 开发服务器端 Web 应用程序。You can use Node.js to develop server-side web applications written in JavaScript. Node.js 生态系统与 npm 和 gulp 等任务运行程序紧密结合,以提供有效环境构建基于 JavaScript 的应用程序。The Node.js ecosystem is tightly coupled with npm and task runners such as gulp to provide an efficient environment for building JavaScript-based applications. Node.js 类似于 IIS Express 或 IIS,但是包括简化客户端开发的工具。Node.js is similar to IIS Express or IIS, but includes tools to simplify client-side development.

有关 Node.js 的详细信息,请参阅以下内容:For more information about Node.js, see the following:

gulp 任务运行程序Gulp task runner

SharePoint 客户端开发工具使用 gulp 作为生成过程任务运行程序,以执行以下操作:SharePoint client-side development tools use gulp as the build process task runner to:

  • 捆绑和缩小 JavaScript 与 CSS 文件。Bundle and minify JavaScript and CSS files.
  • 在每次生成前运行工具以调用捆绑和缩小任务。Run tools to call the bundling and minification tasks before each build.
  • 将 LESS 或 Sass 文件编译为 CSS。Compile LESS or Sass files to CSS.
  • 将 TypeScript 文件编译为 JavaScript。Compile TypeScript files to JavaScript.

有关 gulp 的详细信息,请参阅以下内容:For more information about gulp, see the following:

WebpackWebpack

Webpack 是一个模块程序包,它采用 Web 部件文件和依赖项,并生成一个或多个 JavaScript 捆绑,以便为不同的方案加载不同的程序包。Webpack is a module bundler that takes your web part files and dependencies and generates one or more JavaScript bundles so that you can load different bundles for different scenarios.

开发工具链使用 CommonJS 进行构建。这便于你对模块以及其使用位置进行定义。工具链还使用通用的模块加载器 SystemJS 来加载模块。通过确保每个 Web 部件在其各自的命名空间中进行执行,有助于确定 Web 部件的范围。The development tool chain uses CommonJS for bundling. This enables you to define modules and where you want to use them. The tool chain also uses SystemJS, a universal module loader, to load your modules. This helps you to scope your web parts by making sure that each web part is executed in its own namespace.

有关 webpack 的详细信息,请参阅以下内容:For more information about webpack, see the following:

Yeoman 生成器Yeoman generators

Yeoman 有助于启动新项目、指定最佳做法和工具,帮助你保持高效率。Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. 框架中包含 Yeoman SharePoint 生成器,可用于启动新的客户端 Web 部件项目。The Yeoman SharePoint generator is available as part of the framework to kickstart new client-side web part projects.

有关 Yeoman 的详细信息,请参阅以下内容:For more information about Yeoman, see the following:

以下是一些可以尝试的常见 Yeoman 生成器,具体取决于你选择的框架:The following are some common Yeoman generators that you can try, depending on your choice of framework:

源代码编辑器Source code editors

由于 SharePoint Framework 为客户端驱动型,因此你可以使用自己选择的 HTML/JavaScript 代码编辑器,例如:SharePoint Framework is client-side driven and thus you can use your choice of HTML/JavaScript code editors, such as:

SharePoint Framework 文档说明和示例中使用的是 Visual Studio Code。SharePoint Framework documentation uses Visual Studio Code in the docs and examples. Visual Studio Code 是 Microsoft 提供的轻型源代码编辑器,功能十分强大,可以在桌面上运行,适用于 Windows、Mac 和 Linux。Visual Studio Code is a lightweight but powerful source code editor from Microsoft that runs on your desktop and is available for Windows, Mac, and Linux. 其中内置了对 JavaScript、TypeScript 和 Node.js 的支持,且生态系统中包含多种适用于其他语言(如 C++、C#、Python 和 PHP)和运行时的扩展。It comes with built-in support for JavaScript, TypeScript, and Node.js, and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

SharePoint REST APISharePoint REST APIs

SharePoint Framework 提供与 SharePoint 体验的关键集成,并面向 Web 开发。SharePoint REST API 使你能够与 SharePoint 以及其他使 Web 部件功能成形的工作负荷进行交互。The SharePoint Framework provides key integrations with SharePoint experiences and targets web development. The SharePoint REST APIs enable you to interact with SharePoint and other workloads that shape your web part functionality.

我们建议你熟悉以下 REST API 集:We recommend that you become familiar with the following set of REST APIs:

模式和做法Patterns and Practices

Office 开发模式和做法 / SharePoint 模式和做法 (PnP) 主动提供代码示例、模式和其他资源,以帮助你将现有解决方案转换为 SharePoint Framework。请务必熟悉代码示例和通过 PnP 努力提供的指导。The Office Dev Patterns and Practices / SharePoint Pattern and Practices (PnP) initiative provides code samples, patterns, and other resources to help you transform your existing solution to the SharePoint Framework. Be sure to become familiar with the code samples and guidance that is available through the PnP effort.

另请参阅See also