Share via

Генератор Yeoman для SharePoint Framework

  • Статья

Генератор Yeoman SPFx для SharePoint Online помогает быстро создавать проекты клиентских решений SharePoint с использованием подходящей цепочки инструментов и структуры проекта. Он используется вместе с Yeoman для получения вопросов о создании шаблонов проекта (файлов папок & ).

Важно!

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

Генератор Yeoman SPFx для SharePoint Online ("генератор SPFx") использует ответы на вопросы, которые отображаются разработчику, чтобы создать новый проект SharePoint Framework (SPFx). В зависимости от ответов на определенные запросы будут отображаться другие вопросы.

Например, если выбрать тип компонента Веб-часть, будут запрошено только имя веб-части и тип шаблона. Если же выбрать тип компонента Расширение, также будет запрошен тип расширения, например, настройщик приложений, настройщик полей или набор команд ListView.

Ниже показано создание нового решения с именем sfpxplay-01 в текущей папке с веб-частью HelloWorld, использующей шаблон проекта Минимальный:

yo @microsoft/sharepoint --skip-install

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  SharePoint Online SPFx  │
   `---------´   │          Yeoman          │
    ( _´U`_ )    │     Generator@1.14.0     │
    /___A___\   /╰──────────────────────────╯
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Let's create a new SharePoint solution.
? What is your solution name? spfxplay-01
? Which type of client-side component to create? WebPart
Add new Web part to solution spfxplay-01.
? What is your Web part name? HelloWorld
? Which template would you like to use? Minimal

   create package.json
    force .yo-rc.json
   create config/package-solution.json
   create config/config.json
   create config/serve.json
   create tsconfig.json
   create .vscode/launch.json
   create .vscode/settings.json
   create config/deploy-azure-storage.json
   create config/write-manifests.json
   create src/index.ts
   create README.md
   create .gitignore
   create .npmignore
   create gulpfile.js
   create tslint.json
   create src/webparts/helloWorld/loc/en-us.js
   create src/webparts/helloWorld/loc/mystrings.d.ts
   create src/webparts/helloWorld/HelloWorldWebPart.module.scss
   create src/webparts/helloWorld/HelloWorldWebPart.ts
   create src/webparts/helloWorld/HelloWorldWebPart.manifest.json
   create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_outline.png
   create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_color.png

Changes to package.json were detected.
Skipping package manager install.

      _=+#####!
   ###########|       .------------------------------------.
   ###/    (##|(@)    |          Congratulations!          |
   ###  ######|   \   |  Solution spfxplay-01 is created.  |
   ###/   /###|   (@) |   Run gulp serve to play with it!  |
   #######  ##|   /   '------------------------------------'
   ###     /##|(@)
   ###########|
      **=+####!

Совет

Различные типы компонентов и параметры описываются в документации на этом сайте. На этой странице содержится описание не всех параметров. Дополнительные сведения о каждом из типов компонентов см. в соответствующих темах в документации.

Установите генератор Yeoman SharePoint Online SPFx

Генератор SPFx доступен в виде пакета npm. Установите последнюю версию генератора SPFx, введя следующую команду на консоли:

npm install @microsoft/generator-sharepoint -g

Можно также установить определенную версию генератора, указав номер версии в имени пакета (используйте @1 в качестве разделителя). Например, чтобы установить генератор SPFx v1.10, выполните следующую команду:

npm install @microsoft/generator-sharepoint@1.10 -g

Параметры шаблонов проектов

До SPFx версии 1.14 разработчики могли выбрать в генераторе один из двух шаблонов проектов:

  • Без платформы JavaScript
  • React;

Примечание.

Третий вариант, Knockout, был доступен во всех выпусках SPFx до версии 1.10 включительно. В SPFx версии 1.11 этот вариант был упразднен.

Эти шаблоны включали минимальный объем кода, необходимый в проекте, чтобы приступить к созданию решений. В шаблоне Без платформы JavaScript для задания стиля базового компонента использовались HTML и CSS. В шаблоне React для этой же цели использовались HTML, React и CSS.

Шаблоны проектов в SPFx версии 1.14 обновлены: добавлена поддержка тем

В выпуске SPFx версии 1.14 генератор SPFx представил новые & обновленные шаблоны проектов. Цель этих шаблонов — включить код, необходимый для поддержки темы в текущей среде, где выполняется компонент (SharePoint или Microsoft Teams).

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

Компоненты SPFx компонентов, используемые в контексте Microsoft Teams, получат сведения о теме текущего клиента Microsoft Teams: тема по умолчанию (светлая), темная или тема высокой контрастности.

Кроме того, эти шаблоны включают код, определяющий, в каком контексте работает компонент: SharePoint контексте или Microsoft Teams.

Например, следующие методы включены в оба шаблона. Метод _getEnvironmentMessage() возвращает строку, указывающую контекст выполнения компонента: SharePoint или Microsoft Teams, а также среду, в которой развернут компонент: рабочая среда или среда разработки (в качестве сервера используется localhost). Метод onThemeChanged() определяет, использует ли текущая тема темный режим, а также применяет определенные изменения к свойствам в зависимости от цветов текущей темы:

private _getEnvironmentMessage(): string {
  if (!!this.context.sdks.microsoftTeams) { // running in Teams
    return this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentTeams
        : strings.AppTeamsTabEnvironment;
  }

  return this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentSharePoint
        : strings.AppSharePointEnvironment;
}

protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
  if (!currentTheme) {
    return;
  }

  this._isDarkTheme = !!currentTheme.isInverted;
  const {
    semanticColors
  } = currentTheme;
  this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
  this.domElement.style.setProperty('--link', semanticColors.link);
  this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);

}

Минимальный шаблон проекта

В SPFx версии 1.14 в генераторе SPFx появился новый вариант шаблона проекта: Минимальный. Этот шаблон проекта не включает тему и код среды узла в новые проекты.

Например, новый проект веб-части начинается со следующего кода — это минимальный код, необходимый для запуска веб-части:

export default class HelloWorldMinimalWebPart
          extends BaseClientSideWebPart<IHelloWorldMinimalWebPartProps> {

  protected onInit(): Promise<void> {
    return super.onInit();
  }

  public render(): void {
    this.domElement.innerHTML = `<div class="${ styles.helloWorldMinimal }"></div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

Упраздненные запросы генератора

В каждом выпуске SharePoint Framework в генераторе Yeoman могут добавляться и удаляться те или иные запросы. Некоторые запросы были удалены, чтобы упростить интерфейс создание проектов.

В следующем разделе перечислены упраздненные запросы и правила их применения.

Назначение для разных сред SharePoint

В выпуске SPFx версии 1.13 был упразднен следующий запрос:

Какие базовые пакеты нужно выбрать для ваших компонентов?

Этот запрос давал разработчику возможность создать проект, предназначенный для определенных развертываний SharePoint, включая следующие:

  • Только SharePoint Online (последняя версия)
  • SharePoint 2016 и более поздних версий, включая SharePoint 2019 и SharePoint Online
  • SharePoint 2019 и более поздних версий, включая SharePoint Online

Начиная с SPFx версии 1.13 генератор может создавать проекты только для SharePoint Online.

Пропустить развертывание функций — skipFeatureDeployment

В выпуске SPFx версии 1.14 был упразднен следующий запрос:

Предоставить ли администратору клиента возможность развернуть решение на всех сайтах сразу, не запуская развертывание компонентов или добавление приложений на сайтах?

Здесь можно выбрать, как устанавливается решение: автоматически на всех сайтах в клиенте или вручную на каждом сайте по отдельности. Параметр по умолчанию — [N]o.

Примечание.

Подробнее об этом запросе: развертывание решений SharePoint Framework на уровне клиента.

Ответ на этот вопрос устанавливался в качестве значения свойства skipFeatureDeployment в файле проекта ./config/package-solution.json.

Начиная с SPFx версии 1.14 для свойства skipFeatureDeployment по умолчанию задано значение true. При необходимости можно изменить значения этого свойства после создания проекта.

Изолированные веб-части домена — isDomainIsolated

В выпуске SPFx версии 1.14 был упразднен следующий запрос:

Потребуются ли компонентам решения уникальные разрешения на доступ к веб-API, не используемые другими компонентами в клиенте?

Здесь выясняется, где следует отображать веб-часть в решении: либо в IFRAME в уникальном домене, либо в DIV в виде текущей страницы. Параметр по умолчанию — [N]o.

Примечание.

Подробнее об этом запросе: изолированные веб-части

Ответ на этот вопрос устанавливался в качестве значения свойства isDomainIsolated в файле проекта ./config/package-solution.json.

Начиная с SPFx версии 1.14 для свойства isDomainIsolated по умолчанию задано значение false. При необходимости можно изменить значения этого свойства после создания проекта.

Какую платформу нужно использовать?

В выпуске SPFx версии 1.14 изменился следующий запрос:

Какую платформу нужно использовать?

Этот запрос отображался для определенных типов проектов, например для типов веб-частей & расширений SPFx. За счет этого разработчики могли выбирать разные шаблоны проектов: Без платформы JavaScript или React.

На основе выбранного варианта генератор Yeoman формировал шаблон проверка по умолчанию.

В SPFx версии 1.14 этот запрос был изменен на следующий с тремя вариантами: Минимальный, Без платформы или React:

Какой шаблон следует использовать?

Описание компонентов

В выпуске SPFx версии 1.14 отменены следующие запросы:

Какое описание у вашей веб-части?

Каково описание вашего настройщика приложения?

Каково описание настройщика полей?

Каково описание набора команд ListView?

Каково описание библиотеки?

Каково описание вашего расширения адаптивной карточки?

Значения этих запросов были заданы для preConfiguredEntries[0].description.default&preConfiguredEntries[0].properties.description свойств в файле *.manifest.json компонента.

Начиная с SPFx версии 1.14 для этих свойств заданы пустые строки. При необходимости можно изменить значения этих свойств после создания проекта.

Параметры командной строки генератора SPFx

Параметры командной строки генератора SPFx можно использовать для создания проектов с помощью одной команды вместо того, чтобы выполнять действия пошагово, следуя подсказкам. Выполните следующую команду, чтобы просмотреть список параметров командной строки, доступных генератору Yeoman для SharePoint:

yo @microsoft/sharepoint --help