SharePoint front-end разработка из шаблона

Данная статья является продолжением моей предыдущей (Подготовка компьютера для front-end разработки для проектов SharePoint).

Я остановился на моменте, когда на компьютер для front-end разработки было установлено все необходимое программное обеспечение для начала написания кода.

Но, по возможности желательно начинать проект не с пустого каталога, а использовать шаблоны, разработанные специально под тип проекта.

Наверное, Вы уже слышали о SharePoint Framework (сокращенно SPFx)? Что команда SPFx предлагает для быстрого развертывания шаблона проекта? Предлагается Yeoman генератор. Возможно многие сейчас возразить по поводу SPFx "Это слишком сложно для моей задачи на текущий момент", "Я пишу под SharePoint On-Premises и Apps у меня не настроены", "Мне нужно только редактировать файлы в активах сайтов" или "У меня такие задачи, что SPFx не поможет" это же только для разработки веб-частей.

Для того, чтобы в "переходный" период можно было начать делать проекты по-новому и не зависеть от нюансов SPFx, а потом и быстрее адаптироваться под него, созданы другие генераторы с альтернативной схемой доставки приложений в SharePoint. Альтернатива, которую я опишу, проще в использовании и уже сейчас позволит освоить и применять Git, VSC (или любой другой редактор), Node.js, задачи автоматизации, причем в очень простом и понятном исполнении. Однако данный переход сейчас может оказаться сверх полезным.

Для развертывания шаблона проекта мы будем использовать SP Pull-n-Push генератор для Yeoman. Данный генератор создает проект из шаблона с задачами для "вытягивания" файлов из SharePoint и публикации обратно в момент сохранения в редакторе.

Если Вы следовали пунктам статьи по подготовке среды, то у Вас уже должен быть установлен Yeoman и другие нужные глобальные модули. Если нет, то вот консольная команда:

npm install -g gulp bower yo 

Теперь давайте установим генератор:

npm install -g generator-sppp

Примечание: SP Pull-n-Push (sppp) - довольно молодой генератор, поэтому замечания по ошибкам и предложения приветствуются на странице GitHub'а.

Стоит не забывать, что при выходе новых версий генераторов, на их необходимо обновлять, если требуется применить обновленный шаблон при инициализации нового проекта. Для обновления генераторов нужно воспользоваться командой yo в консоли и выбрать пункт "Update your generators".

Для создания проекта по шаблону необходимо создать папку (а лучше же клонировать пустой проект из Git) и запустить yo-команду в консоли в директории проекта:

yo sppp [ИмяВашегоПроекта]

После данной команды запустится мастер. В мастере необходимо предоставить параметры приложения и связки проекта со средой разработки SharePoint:

Все запрашиваемые параметры в дальнейшем могут быть изменены в конфигурационных файлах проекта.

Мастер Yeoman скопирует все нужные файлы и директории и запустит установку NPM и Bower компонент в случае такой необходимости.

В текущей версии генератора представлено 2 задачи автоматизации:

1) Скачивание файлов из целевой папки "ассетов" SharePoint в локальную папку проекта ("./src").

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

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

Для скачивания файлов используется задача sppull:

gulp sppull-all

После ее запуска, через какое-то время, файлы из SharePoint будут скачены в проект.

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

gulp watch-assets

Данная задача запускает мониторинг изменения файлов в "./src" и отправляет изменения в SharePoint. Задача использует gulp-spsave модуль Node.js для публикации файлов.

Проект, созданный с использованием sppp генератора, можно расширить путем конфигурации дополнительных задач и модулей под Ваш проект, а полученный опыт может стать отправной точкой на пути к современной разработке под SharePoint и переходу к SPFx.