Развертывание клиентской веб-части на странице SharePoint (Hello World, часть 3)

Статья
04/08/2023

Прежде чем приступать к процедурам этой статьи, выполните инструкции из следующих статей:

Вы также можете следовать этому руководству, просмотрев это видео на youTube-канале Microsoft 365 Platform Communtiy (PnP):

Упаковка веб-части HelloWorld

В окне консоли перейдите к каталогу проекта веб-части, создание которого описано в статье Создание первой клиентской веб-части SharePoint.
```
cd helloworld-webpart
```
Если команда gulp serve все еще выполняется, остановите ее, нажав клавиши CTRL+C.

Чтобы использовать клиентскую веб-часть не в Workbench, а на современных серверных страницах SharePoint, ее необходимо развернуть и зарегистрировать в SharePoint. Для начала необходимо упаковать веб-часть.

Откройте решение веб-части HelloWorldWebPart в Visual Studio Code или другой среде IDE.

Откройте файл package-solution.json в папке config.

В файле package-solution.json определяются метаданные пакета, как показано в следующем фрагменте кода:

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
    "name": "mysolution-client-side-solution",
    "id": "ee1a495d-c7bb-499b-bd71-728aaeb79cd2",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false,
    "developer": {
    "name": "",
    "websiteUrl": "",
    "privacyUrl": "",
    "termsOfUseUrl": "",
    "mpnId": "Undefined-1.14.0"
    },
    "metadata": {
    "shortDescription": {
        "default": "mysolution description"
    },
    "longDescription": {
        "default": "mysolution description"
    },
    "screenshotPaths": [],
    "videoUrl": "",
    "categories": []
    },
    "features": [
    {
        "title": "mysolution Feature",
        "description": "The feature that activates elements of the mysolution solution.",
        "id": "d72e47b2-d5a2-479f-9f9a-85e1e7472dee",
        "version": "1.0.0.0"
    }
    ]
},
"paths": {
    "zippedPackage": "solution/mysolution.sppkg"
}
}

Чтобы упаковать клиентское решение, введите в окне консоли следующую команду:
```
gulp bundle
```
Чтобы упаковать клиентское решение, содержащее веб-часть, введите в окне консоли следующую команду:
```
gulp package-solution
```
Эта команда создает следующий пакет: ./sharepoint/solution/helloworld-webpart.sppkg.

Содержимое пакета

Чтобы упаковать веб-часть, пакет использует компонент SharePoint. По умолчанию задача gulp создает функцию для веб-части.

Вы можете просмотреть необработанное содержимое пакета в папке ./sharepoint/solution/debug.

Затем содержимое упаковывается в SPPKG-файл. Формат пакета напоминает таковой для пакета надстроек SharePoint. Для упаковки решения используются правила спецификации Microsoft Open Packaging Conventions.

Файлы JavaScript, CSS и другие ресурсы включаются в пакет при использовании параметра --ship. Однако в этом руководстве мы сначала проверим развертывание и возможности, разместив файлы JavaScript в localhost. Автоматическое создание пакетов и варианты размещения объясняются в следующем руководстве.

Примечание.

Начиная с SharePoint Framework версии 1.4, статические ресурсы по умолчанию упаковываются в SPPKG-файлы. При развертывании пакета в каталоге приложений ресурсы автоматически размещаются в сети CDN Office 365 (если она включена) или по URL-адресу каталога приложений. Эти действия можно изменить с помощью параметра includeClientSideAssets в файле package-solution.json.

Развертывание пакета HelloWorld в каталоге приложений

Теперь необходимо развернуть пакет, созданный в каталоге приложений.

Примечание.

Если у вас нет каталога приложений, администратор SharePoint Online может создать каталог, выполнив инструкции в этом руководстве: Использование каталога приложений, чтобы сделать пользовательские бизнес-приложения доступными для среды SharePoint Online.

Перейдите в каталог приложений вашего сайта.
Если вы видите классический интерфейс в каталоге приложений, выберите перемещение нового интерфейса, щелкнув Попробовать новую страницу управления приложениями в заголовке.
Отправьте или перетащите файл helloworld-webpart.sppkg в каталог приложений.

При этом будет развернут пакет клиентского решения. Так как это клиентское решение с полным доверием, в SharePoint появится диалоговое окно с предложением разрешить развертывание клиентского решения.
Нажмите Развернуть.

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

Установка клиентского решения на сайте

Перейдите к семейству веб-сайтов разработчика или семейству веб-сайтов, которые нужно использовать для тестирования
Нажмите значок шестеренки на верхней панели навигации справа и выберите Добавить приложение, чтобы перейти на страницу "Приложения".
В поле поиска введите helloworld и нажмите клавишу ВВОД, чтобы отфильтровать приложения.
Выберите приложение helloworld-webpart-client-side-solution, чтобы установить его на сайте.

Теперь клиентское решение и веб-часть установлены на сайте разработчика.

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

Предварительный просмотр веб-части на странице SharePoint

Теперь, когда вы развернули и установили клиентское решение, добавьте веб-часть на страницу SharePoint. Помните, что такие ресурсы, как JavaScript и CSS, доступны с локального компьютера, поэтому не удастся отобразить веб-части, если localhost не запущен.

Откройте {{your-webpart-guid}}.manifest.json в папке dist.

Обратите внимание, что свойство internalModuleBaseUrls в записи loaderConfig все еще указывает на ваш локальный компьютер:
```
"internalModuleBaseUrls": [
  "https://localhost:4321/dist/"
],
```
Прежде чем добавлять веб-часть на серверную страницу SharePoint, запустите локальный сервер.
В окне консоли с каталогом проекта helloworld-webpart выполните задачу gulp, чтобы начать обслуживание с localhost:
```
gulp serve --nobrowser
```
Примечание.

--nobrowser не запустит SharePoint Workbench автоматически, поскольку он в этом случае не нужен, так как веб-часть будет размещаться на странице SharePoint.

Добавление веб-части HelloWorld на современную страницу

В браузере перейдите на сайт, где было установлено решение.
Нажмите значок шестеренки на верхней панели навигации справа и выберите Добавить страницу.
Отредактируйте страницу.
Откройте средство выбора веб-частей и выберите веб-часть HelloWorld.

Примечание.

Снимки экрана сделаны с сайта, на котором используется современный интерфейс.

Из локальной среды будут загружены ресурсы веб-части. Чтобы загрузить скрипты, размещенные на локальном компьютере, необходимо разрешить в браузере выполнение небезопасных скриптов. Убедитесь, что в вашем браузере включено выполнение небезопасных скриптов для данного сеанса.

Должна появиться веб-часть HelloWorld, создание которой описано в предыдущей статье, получающая списки с текущего сайта.

Веб-часть Hello World на современной странице

Изменение свойств веб-части

Выберите значок Настроить элемент (перо) в веб-части, чтобы открыть область свойств.

Это та же область свойств, которую вы создали и проверили в Workbench.
Измените свойство Description (Описание), указав текст Client-side web parts are awesome! (Клиентские веб-части — это круто).
Обратите внимание на то, что веб-часть обновляется по мере ввода текста, как и на реактивной панели.
Выберите значок x, чтобы закрыть клиентскую область свойств.
На панели инструментов выберите Сохранить и закрыть, чтобы сохранить страницу.

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

Поздравляем! Вы развернули клиентскую веб-часть на современной странице SharePoint.

Вы можете продолжить разработку веб-части Hello World, прочитав следующую статью — Размещение клиентской веб-части в сети доставки содержимого Office 365. Из нее вы узнаете, как развернуть ресурсы веб-части и загрузить их из сети CDN Office 365, а не из localhost, что означает подготовку этого решения для отправки или его использование в производственной среде.

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