Создание решений с типом компонента библиотеки в SharePoint Framework

Статья
03/21/2023

В этом руководстве вы научитесь создавать компонент библиотеки SharePoint Framework (SPFx) и использовать его в клиентской веб-части.

Создание сторонней библиотеки SPFx

Создайте каталог проекта в любом расположении
```
md corporate-library
```
Перейдите к каталогу проекта
```
cd corporate-library
```
Создайте библиотеку, запустив генератор Yeoman для SharePoint
```
yo @microsoft/sharepoint
```
При появлении запроса введите следующие значения (выберите вариант по умолчанию для всех запросов, не перечисленных ниже).
- Предоставить администратору клиента возможность развернуть решение на всех сайтах сразу, не запуская развертывание компонентов или добавление приложений на сайтах?: Да
- Какой тип клиентского компонента нужно создать?: библиотека
- Имя библиотеки?: CorporateLibrary
- Описание библиотеки?: описание CorporateLibrary
После формирования проекта отобразится библиотека, созданная с помощью файла index.ts, который содержит экспортированные данные из созданного объекта CorporateLibrary.
Откройте решение в предпочитаемом редакторе и перейдите в src/corporateLibrary/CorporateLibraryLibrary.ts
Вы заметите, что создан метод по умолчанию name(). Переименуйте этот метод указанным ниже образом:
```
public getCurrentTime(): string {
  return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
}
```
Запустите gulp в командной строке, чтобы убедиться в правильности сборки.

Использование сторонней библиотеки SPFx (для локального тестирования)

Запустите gulp bundle --ship из корневой папки решения библиотеки. простой gulp build не работает.
Запустите npm link из корневой папки решения библиотеки. В данном случае это будет папка corporate-library.
Сразу после создания символической ссылки на новый компонент библиотеки SPFx не забудьте выполнить gulp build хотя бы один раз. Скомпилируйте компонент библиотеки хотя бы один раз, чтобы можно было импортировать его в качестве модуля в другой проект. Помните, что в package.json указано "main": "lib/index.js", поэтому это расположение должно существовать до любых попыток импорта.
При этом будет создана локальная ссылка npm на библиотеку с именем, указанным в package.json.
Создайте проект веб-части в отдельной папке проекта вне структуры папок проекта библиотеки, следуя инструкциям отсюда. Назовите эту веб-часть CorporateWebPart.
Из корневой папки новой веб-части выполните команду npm link corporate-library
Это приведет к созданию символьной ссылки на эту локально созданную библиотеку в веб-части и сделает ее доступной для веб-части.
Откройте решение веб-части в предпочитаемом редакторе и перейдите в src/webparts/corporateWebPart/CorporateWebPartWebPart.ts
Добавьте импорт для ссылки на библиотеку:
```
import * as myLibrary from 'corporate-library';
```

Измените метод render() указанным ниже образом:

public render(): void {
  const myInstance = new myLibrary.CorporateLibraryLibrary();

  this.domElement.innerHTML = `
  <div class="${ styles.corporateWebPart }">
      <div class="${ styles.container }">
      <div class="${ styles.row }">
          <div class="${ styles.column }">
          <span class="${ styles.title }">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
          <p>${myInstance.getCurrentTime()}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
          </a>
          </div>
      </div>
      </div>
  </div>`;
}

Обратите внимание, что мы создаем новый экземпляр библиотеки, а затем ссылаемся на метод getCurrentTime() для получения строки текущего времени из библиотеки.

Проверьте веб-часть, запустив локальную среду Workbench, и добавьте веб-часть на страницу:
```
gulp serve
```

Развертывание и использование сторонней библиотеки SPFx из каталога приложений клиента

Перейдите в корневую папку corporate-library, чтобы скомпоновать и упаковать решение:
```
gulp bundle --ship
gulp package-solution --ship
```
Это позволит выполнить сборку всех локальных изменений и упаковав решение в файл *.sppkg в папке sharepoint/solution .
Разверните этот пакет в каталоге приложений клиента и разверните его в пределах всего клиента, установив флажок Сделать это решение доступным для всех сайтов в организации.
Перейдите к папке решения веб-части и откройте файл ./package.json.
Добавьте запись, указывающую запись библиотеки и ее версию, в разделе dependencies (эти данные можно найти в файле package.json или в созданном ранее решении библиотеки) следующим образом:
```
"dependencies": {
  "corporate-library": "0.0.1", // here we added the reference to the library
  "@microsoft/sp-core-library": "1.9.0",
  "@types/webpack-env": "1.13.1",
  "@types/es6-promise": "0.0.33"
},
```
Примечание.

Команда npm install приведет к ошибке, если вы создали веб часть и добавили ссылку на package.json, но не создали локальную ссылку с помощью команды npm link. Если вы создали ссылку с помощью npm link и выполнили команду npm install, то ошибка при выполнении команды npm install не возникнет, но символическая ссылка будет удалена. Если нужно выполнить команду npm install, потребуется временно удалить ссылку на корпоративную библиотеку и повторно создать ссылку, выполнив команду npm link corporate-library и обновив ссылку в package.json.

Соберите веб-часть:

gulp bundle --ship
gulp package-solution --ship

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

Удаление связи с библиотекой SPFx

Чтобы удалить связь библиотекой SPFx, созданной с помощью символической ссылки при разработке в проекте SPFx, перейдите в корневую папку проекта SPFx и выполните команду.

npm unlink corporate-library

Чтобы проверить расположение папки библиотеки SPFx.

npm ls -g 'corporate-library'

Чтобы удалить локальную ссылку npm на библиотеку, перейдите в корневую папку библиотеки SPFx и выполните команду.

npm unlink

См. также

Использование типа компонента библиотеки в SharePoint Framework

Поделиться через