Как настроить среду разработки SharePoint Framework

  • Статья

Для создания решений SharePoint Framework (SPFx) можно использовать любой текстовый редактор. Можно использовать среду macOS, Windows или Linux.

Примечание.

Прежде чем выполнять действия, описанные в этой статье, настройте клиент Microsoft 365.

Вы также можете следовать этому руководству, посмотрев это видео на канале YouTube сообщества платформы Microsoft 365 (PnP):

Важно!

В приведенных ниже инструкциях предполагается, что вы создаете решения для SharePoint Online с помощью последней версии SharePoint Framework. Если вы разрабатываете решения для SharePoint Server 2019 или SharePoint Server 2016, обратитесь к дополнительной документации по ссылкам из раздела См. также ниже.

Установите Node.js.

Установите новейшую версию LTS — Node.js v16.

Это рекомендуемая в настоящее время версия Node.js для использования с SharePoint Framework (если ниже не указано иное).

Важно!

Среда Node.js часто обновляется и доступна на различных платформах, включая Windows, macOS и Linux. Точные ссылки для скачивания часто меняются, поэтому на этой странице они отсутствуют. Используйте указанные ниже сведения, чтобы определить, какой установщик скачать для вашей платформы.

Имейте в виду, что Node.js постоянно поддерживает два разных выпуска: текущая версия LTS & . SharePoint Framework поддерживается только для версий LTS. Дополнительные сведения о выпусках долгосрочной поддержки (LTS) Node.js см. в разделе выпускиNode.js>.

Совет

Веб-сайт Node.js всегда рекомендует последнюю версию установщика для обоих выпусков LTS & Current. Чтобы скачать определенные версии Node.js версий, используйте страницу Node.js > загрузки предыдущих выпусков>.

  • Пользователи Windows могут использовать установщики *.msi для x86 или x64 в зависимости от установки Windows. Обычно доступно только два файла *.msi с именами, похожими на node-v{version-number}-x[86|64].msi.
  • Пользователи macOS могут использовать установщик *.pkg , который обычно называется node-v{version-number}.pkg.

Можно проверить, установлена ли уже среда Node.js, а также определить установленную версию. Для этого выполните следующую команду:

node --version

SharePoint Framework версии 1.16.0 поддерживается в следующих Node.js версиях:

  • Node.js v16 LTS (v16.13.x — v16.18.x, aka: Gallium)

Осторожностью

Если вы создаете компоненты SharePoint Framework для локальных развертываний SharePoint, ознакомьтесь с дополнительными страницами по ссылкам из раздела См. также для получения дополнительных сведений.

Установка редактора кода

Для создания веб-частей можно использовать любой редактор кода или интерфейс IDE, поддерживающий клиентскую разработку, например:

В указаниях и примерах в этой статье используется Visual Studio Code, но вы можете использовать любой редактор.

Установите необходимые компоненты набора инструментов

В наборе инструментов разработки и сборки решений SharePoint Framework используются различные популярные инструменты с открытым исходным кодом. Хотя большинство зависимостей включены в каждый проект, несколько глобальных зависимостей вам нужно будет установить на своей рабочей станции.

Совет

Вы можете установить все три приведенных ниже инструмента с помощью одной строки.

npm install gulp-cli yo @microsoft/generator-sharepoint --global

Установка Gulp

Gulp — это средство выполнения задач на основе JavaScript, используемое для автоматизации повторяющихся задач. В наборе инструментов сборки SharePoint Framework задачи Gulp используются для сборки проектов и создания пакетов JavaScript, а полученные пакеты используются при развертывании решений.

Чтобы установить CLI Gulp, введите следующую команду:

npm install gulp-cli --global

Установка Yeoman

Yeoman помогает запускать новые проекты, предоставляя рекомендации и инструменты, которые позволят сохранить эффективность работы. Средства клиентской разработки SharePoint включают генератор Yeoman для создания веб-частей. Генератор предоставляет общие средства сборки, стандартный код и общий веб-сайт для тестирования веб-частей.

Важно!

Yeoman версии 4.x требуется для spFx версии 1.13 forward.

Чтобы установить Yeoman, введите следующую команду:

npm install yo --global

Установка генератора Yeoman для SharePoint

С помощью генератора веб-частей Yeoman для SharePoint можно быстро создать проект клиентского решения SharePoint с правильной цепочкой инструментов и структурой проекта.

Чтобы глобально установить генератор Yeoman для SharePoint Framework, введите такую команду:

npm install @microsoft/generator-sharepoint --global

Дополнительные сведения о генераторе Yeoman SharePoint см. в статье Генератор Yeoman для SharePoint Framework.

Установите современный веб-браузер

В качестве браузера для разработки необходимо использовать современный веб-браузер, например Microsoft Edge, Google Chrome или Firefox.

Настройка доверия к самозаверяющему сертификату разработки

Локальный веб-сервер SharePoint Framework, используемый при тестировании пользовательских решений из среды разработки, по умолчанию использует HTTPS. Это реализуется с помощью самозаверяющего SSL-сертификата разработки. Самозаверяющие SSL-сертификаты не считаются надежными в вашей среде разработки. Сначала необходимо настроить доверие к сертификату в среде разработки.

Задача utility включена в каждый проект SharePoint Framework в форме задачи gulp. Вы можете сделать это сейчас или после создания первого проекта, как описано в руководстве Создание первой клиентской веб-части SharePoint (Hello World, часть 1).

После создания проекта с помощью генератора Yeoman для SharePoint Framework выполните следующую команду из корневой папки проекта.

gulp trust-dev-cert

Примечание.

Предполагается, что вы установили все зависимости с помощью команды npm install после создания проекта. Этот шаг установит все задачи gulp в составе проекта.

Дополнительные средства

Вам также могут пригодиться следующие средства:

Дальнейшие действия

Теперь вы готовы создать свою первую клиентскую веб-часть!

SPFx & SharePoint Server (on-prem)

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 Framework (SPFx) версии 1.1.
  • В SharePoint Server 2019 используется SharePoint Framework (SPFx) версии 1.4.1.

В зависимости от сценария, вам могут потребоваться разные среды разработки. Для решения этих задач разработчики использовали следующие подходы:

  • виртуальные машины;
  • Docker;
  • Node Version Manager (NVM).

Совет

Дополнительные сведения о NVM см. в разделе Улучшение Node.js установка управления с помощью Node Version Manager.

Устранение неполадок

Проверка версии глобально установленных пакетов

Чтобы получить список всех глобально установленных пакетов, выполните следующую команду:

npm list --global --depth=0️

Невозможно установить доверие к самозаверяющему сертификату разработки

Если при запуске gulp trust-dev-cert& возникают проблемы с доверием к самозаверяющим сертификату, вы убедились, что установлены правильные версии всех зависимостей, одно из решений, которое обычно можно решить, — удалить все глобально установленные пакеты, удалить Node.js, перезагрузить & запуск снова.

В некоторых случаях выполнение команды gulp trust-dev-cert не дает нужного результата (установления доверия к самозаверяющему сертификату разработки на вашем компьютере). В таких редких случаях может потребоваться удалить скрытую папку, созданную в папке вашего профиля.

Найдите & удаление папки {{homedir}}/.gcb-serve-data для версии SPFx, более ранней, чем версия 1.12.1. Для более поздних версий удалите папку {{homedir}}/.rushstack, а затем снова укажите доверие к самозаверяемому сертификату разработки. В противном случае запуск gulp untrust-dev-cert будет иметь такой же эффект, то есть удалит файлы сертификата из папки профиля.

Иногда сертификат не добавляется в Доверенный корневой центр сертификации даже после выполнения команды trust-dev-cert. Это может происходить, если действие блокируется некоторыми политиками. Попробуйте вручную импортировать файл rushstack-serve.pem из папки {{homedir}}/.rushstack в диспетчер сертификатов под доверенным корневым центром сертификации с локальной учетной записью администратора.

Невозможно установить пакеты с помощью NPM — корпоративные прокси-серверы

Если ваша среда разработки защищена корпоративным прокси-сервером, вам необходимо настроить NPM для использования этого прокси-сервера. См. документацию npm-config по настройке среды разработки, защищенной корпоративным прокси-сервером, в частности настройки proxy&http-proxy. Дополнительные сведения: Настройка NPM для корпоративного веб-прокси

См. также