设置 SharePoint 框架开发环境
可以使用任何文本编辑器生成SharePoint 框架 (SPFx) 解决方案。 也可使用 macOS、Windows 或 Linux 环境。
注意
请务必先设置 Microsoft 365 租户，再执行本文中的步骤。
还可以通过在 Microsoft 365 平台社区 (PnP) YouTube 频道上观看此视频来执行这些步骤：
重要
以下步骤假定你正在使用最新版本的 SharePoint 框架构建 SharePoint Online 解决方案。 如果正在构建面向 SharePoint Server 2019 或 SharePoint Server 2016 的解决方案，请参阅下方“另请参阅”部分引述的其他文档。
安装 Node.js
安装最新 LTS 版本的 Node.js v16。
这个版本是当前推荐的Node.js与SharePoint框架一起使用的版本（除非下面另有说明）。
重要
Node.js 经常更新，并且可在macOS、Windows和Linux等多个平台上使用。 因为确切的下载链接经常变化，因此它们未链接到此页面。 请使用以下详细信息确定要为平台下载的安装程序。
请注意，Node.js始终维护两个不同的版本：LTS & 当前版本。 SharePoint Framework 仅支持 LTS 版本。 有关Node.js的长期支持 (LTS) 版本的详细信息，请参阅： Node.js > 版本。
提示
Node.js网站始终推荐这两个 LTS & Current 版本的最新安装程序。 若要下载特定版本的Node.js版本，请使用 “Node.js > 下载 > 以前的版本 ”页。
- 根据 Windows 安装情况，Windows 用户可以使用适用于 x86 或 x64 的 *.msi 安装程序。 通常只有两个可用的 *.msi 文件，其名称类似于 node-v{version-number}-x[86|64].msi。
- macOS 用户可以使用通常名为 node-v{version-number}.pkg 的 *.pkg 安装程序。
通过运行以下命令，可检查是否已安装 Node.js，包括已安装版本：
node --version
以下Node.js版本支持 SharePoint 框架 v1.16.0：
- Node.js v16 LTS (v16.13.x - v16.18.x， 又名：Gallium)
谨慎
如果正在构建面向 SharePoint 本地部署的 SharePoint 框架组件，请参阅“另请参阅”部分中引述的其他文档，了解更多信息。
安装代码编辑器
若要生成 Web 部件，可以使用任何支持客户端开发的代码编辑器或 IDE，如：
此文档中的步骤和示例使用 Visual Studio Code，但你可以使用你选择的任何编辑器。
安装开发工具链先决条件
SharePoint 框架开发和构建工具链利用各种流行的开源工具。 尽管大多数依赖项都包含在每个项目中，但是你需要在工作站上全局安装一些依赖项。
提示
可以在一行中安装以下所有三个工具：
npm install gulp-cli yo @microsoft/generator-sharepoint --global
安装 Gulp
Gulp 是基于 JavaScript 的任务运行程序，用于自动执行重复任务。 SharePoint 框架构建工具链使用 Gulp 任务来构建项目、创建 JavaScript 捆绑包以及生成的用于部署解决方案的程序包。
输入以下命令以安装 Gulp CLI：
npm install gulp-cli --global
安装 Yeoman
Yeoman 可帮助启动新项目，并规定最佳做法和工具，以帮助你保持高效率。 SharePoint 客户端开发工具包括用于新建 Web 部件的 Yeoman 生成器。 此生成器提供常见生成工具、常见样本代码，以及托管主机 Web 部件以供测试的常见样本网站。
重要
SPFx v1.13 转发需要 Yeoman v4.x。
输入以下命令以安装 Yeoman：
npm install yo --global
安装 Yeoman SharePoint 生成器
Yeoman SharePoint Web 部件生成器帮助你快速创建一个具有适当工具链和项目结构的 SharePoint 客户端解决方案项目。
若要全局安装 SharePoint 框架 Yeoman 生成器，请输入以下命令：
npm install @microsoft/generator-sharepoint --global
有关 Yeoman SharePoint 生成器的详细信息，请参阅 SharePoint 框架Yeoman 生成器。
安装现代 Web 浏览器
应使用现代 Web 浏览器（如 Microsoft Edge、Google Chrome 或 Firefox）作为开发浏览器。
信任自签名开发人员证书
在开发环境中测试自定义解决方案时使用的 SharePoint 框架本地 WebServer 默认使用 HTTPS。 这是使用开发自签名 SSL 证书实现的。 自签名 SSL 证书不受开发人员环境信任。 必须先将开发环境配置为信任此证书。
实用工具任务以 Gulp 任务的形式包含在每个 SharePoint 框架项目中。 可以选择立即这样做，也可以等到创建首个项目后再这样做，如生成首个 SharePoint 客户端 Web 部件（Hello World 第 1 部分）教程中所述。
使用 Yeoman 生成器为 SharePoint 框架创建项目后，立即从项目的根文件夹执行以下命令。
gulp trust-dev-cert
注意
这样做的前提是，已在创建项目后使用 npm install 安装所有依赖项。 这一步会将所有 Gulp 任务安装为项目的一部分。
可选工具
下面列出了一些可能也会用到的工具：
后续步骤
现在可以生成首个客户端 Web 部件了！
SPFx & SharePoint Server (本地)
SPFx 在 SharePoint Online (SPO) 、SharePoint Server 2019、 & SharePoint Server 2016 上可用。 此页面上的配置说明假定你正在使用最新版本的 SPFx，为 SharePoint Online 创建解决方案。
SharePoint Online 包含 SPFx 的所有版本，包括所有以前版本和最新版本。 每个 SPFx 解决方案都包含用于告知 SPO 它所依赖的 SPFx 运行时的信息。
如果要为 SharePoint Server 本地部署构建解决方案，请参阅“另请参阅”部分，了解有关特定 SharePoint 版本的详细信息。 每个 SharePoint 本地部署仅支持特定版本的 SPFx。 如果要为不同的 SharePoint 部署创建不同的解决方案，则可能会引入复杂的开发环境配置。
- SharePoint Server 2016 使用 SharePoint 框架 (SPFx) v1.1。
- SharePoint Server 2019 使用 SharePoint 框架 (SPFx) v1.4.1。
根据你的使用场景，可能需要维护不同的开发环境。 开发人员一直采用以下方法来应对上述挑战：
- 虚拟机
- Docker
- 节点版本管理器 (NVM)
疑难解答
检查全局安装包的版本
要获取所有全局安装包的列表，请运行以下命令：
npm list --global --depth=0️
无法信任自签名的开发证书
如果在运行 gulp trust-dev-cert& 时信任自签名证书时遇到问题，你已验证已安装所有依赖项的正确版本，我们通常看到的一种解决方案是卸载所有全局安装的包，卸载Node.js，重新启动 & 重新启动。
在某些情况下，执行命令 gulp trust-dev-cert不能达到信任计算机上的自签名开发证书的预期效果。 在此类极少数情况下，可能需要删除在配置文件文件夹中生成的隐藏文件夹。
找到 & 删除低于 v1.12.1 的 SPFx 版本的 {{homedir}}/.gcb-serve-data 文件夹。 对于更高版本，请 {{homedir}}/.rushstack 删除文件夹，然后再次尝试信任自签名开发证书。 否则，运行 gulp untrust-dev-cert 将具有相同的效果，以从配置文件夹中删除证书文件。
如果证书未添加到受信任的根证书颁发机构，尽管运行gulp trust-dev-cert因为某些策略阻止了该操作， rushstack-serve.pem文件从 {{homedir}}/.rushstack文件夹可以手动导入到受信任根证书颁发机构下的证书管理器中本地管理员帐户。
无法使用 NPM 安装包 - 企业代理
如果开发环境位于企业代理后面，需要将 NPM 配置为使用企业代理。 请参阅 npm-config 文档，了解如何配置企业代理后面的开发环境，尤其是 proxy&http-proxy 设置。 详细信息：为企业 Web 代理配置 NPM