Подготовка компьютера для front-end разработки для проектов SharePoint (для Mac и PC)

Данная статья создана и может быть полезна тем, что планирует разработке front-end решений для SharePoint с использованием современных инструментов разработки

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

Процесс предварительной установки для OS X и Windows немного отличается, но последующий процесс разработки и возможности идентичны.

Установка программного обеспечения

Для разработки нам понадобится следующее ПО:

  • Visual Studio Code – для мастерского редактирования кода
  • Chrome – если в Вашей должности присутствует слово "web" и Вы себя уважаете, то в качестве основных инструментов для отладки веб-решения выступают именно инструменты разработчика Chrome
  • Node.js – основа для локальной автоматизации рутинных действий и рабочего процесса разработки
  • Git клиент – мы же используем Git-репозиторий
  • Cmder – замечательный эмулятор консоли для Windows

Windows

Chocolatey

На Windows мы воспользуемся пакетным менеджером Chocolatey.

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

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin"

Пакеты

Непосредственная мощь пакетных менеджеров - это простота и автоматизация установки. Не надо ничего качать и запускать мастера-установщики. Достаточно нескольких строк в консоли (из под администратора):

choco install visualstudiocode googlechrome nodejs.install git.install cmder -y

Так мы за один раз запустим установку всего требуемого нам софта.

Можно расслабиться и пойти попить чая. Или, в моем случае, кофе. =)

OS X

Homebrew

В мире OS X слегка по-другому. Часть софта подставится из App Store, что-то придется скачать, а остальные пакеты нам установит Homebrew. Brew - это пакетный менеджер, содержащий в своем репозитории пакеты, отсутствующие в App Store.

Установка, как и в случае Chocolatey тривиальна:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Пакеты

Сэкономим время на установке Node.js и Git.

brew install node git

Visual Studio Code, к сожалению придется скачать и установить вручную, а Chrome поставить из App Store. Но в целом это так же очень простой процесс.

Окружение Node.js

После выполненных действий желательно убедится в корректности установки и доступности пакетов в командной строке. Проверим версии Node.js, NPM - пакетный менеджер для Node.js (да, еще один пакетный менеджер, но этим придется пользоваться довольно часто) и, конечно же, Git.

node -v && npm -v && git --version

В результате мы должны увидеть версию Node, NPM и Git, одну за другой. Консольная команда объединена в одну строку, но можно и отдельно.

Так же, желательно проверить, что VSC так же добавлена в переменные среды. Проще всего это проверить, выполнив в консоли:

code .

Должен запустить экземпляр VSC с открытой текущей директорией.

Для инициализации проекта Node.js необходимо выполнить:

npm init -y

Данная команда создаст файл-описание проекта (package.json) в текущей папке проекта.

Модули Node

Существует огромное количество модулей для Node. В реестре NPM можно найти тысячи модулей на все случаи жизни.

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

Если у Вы знакомы с .Net, то NPM можно сравнить с NuGet'ами, но только для Node.js.

Модули могут быть установлены глобально и локально в директорию проекта.

Глобальные модули

Пример установки модули глобально:

npm install gulp -g

Флаг -g отвечает за глобальную установки, без него модуль будет установлен в контекст текущего каталога.

Среди модулей, которые потребуется установить глобально, можно отметить следующие:

  • gulp – автоматизирует различные задачи связанные с процессом разработки
  • bower – еще… еще один пакетный менеджер, позволяет управлять зависимостями библиотек, используемых в контексте браузера (такие как React, jQuery, Bootstrap, Knockout, все наши любимые front-end библиотеки)
  • yeoman – генератор структур проектов по шаблонам
  • eslint – замечательный статический анализатор кода
  • … давайте на этом сейчас остановимся. Золотое правило - не устанавливать чрезмерное количество модулей, до тех пор, пока нет понимания какой модуль и для чего нужен как глобально, так и в проекте.

Итак, вышеперечисленные модули можно установить за раз:

npm install gulp bower yo eslint -g

Локальные модули

Локальные модули непосредственно устанавливаются в проект.

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

На большинстве SharePoint front-end проектах целесообразно использование следующих модулей:

  • gulp – кто-то возразит "Уже же установлено глобально!", но локальная установка так же необходима (глобальная установка позволяет использовать команду “gulp [task]” в консоли, а локальная установка позволяет ссылаться на gulp библиотеку в коде проекта (“require(‘gulp’)”)
  • spsave или gulp-spsave – позволяют автоматизировать публикацию файлов проекта в SharePoint, исключив необходимость ручного развертывания решения
  • sppull – позволяет скачивать файлы и папки из библиотек SharePoint, сценариев использования может быть несколько, например, обратная синхронизация для проверки отличие состояния решения в SharePoint и в текущей точке проекта с помощью алгоритма Git Diff
  • … любые другие в зависимости от задач автоматизации

Прежде чем продолжить, пара слов об опции сохранения.

Устанавливая модуль следующим образом:

npm install sppull

Сам модуль и все зависимости скачиваются в папку node_modules в рамках проекта и можно будет пользоваться модулями, но, так делать категорически не стоит. Во первых, устанавливаемые модули нет смысла хранить в Git (каталог node_modules обычно исключается из Git). Во вторых, информация о зависимостях все же должна быть частью проекта. При клонировании из Git должна быть возможность легко восстановить зависимости, а так же при необходимости обновить версии зависимостей.

Конечно запоминать, что было установлено в проект не нужно. А при установке необходимо использовать ключ --save.

Установка модуля будет выглядеть:

npm install sp-request --save-dev

Ключ --save-dev добавляет модуль в зависимости проекта в режиме разработки, --save – в зависимости проекта в режиме исполнения. Иными словами, если модуль - часть приложения, то он устанавливается с --save, а если модуль - часть проекта и автоматизирует процесс разработки, то --save-dev.

Для front-end проектов SharePoint, скорее всего, устанавливать модули с ключом --save не потребуется.

В случае, если модули устанавливались с ключами save, то после клонирования проектов, достаточно будет запустить команду npm install, все зависимости будет скачены и установлены автоматически пакетным менеджером.

Bower компоненты

Концепт использования и команды Bower практически идентичны NPM, за тем исключением, что Bower управляет библиотеками, используемыми в браузере.

Не буду заострять особого внимания, давайте рассмотрим команду:

bower install jquery#1.4.1 --save

Правда, тоже самое? В данном случае устанавливается зависимость jQuery с версией 1.4.1, если версию не указать, то скачается последняя. Не всегда это так критично, как в случае с jQuery.

Git

Ведь уже все переехали на Git? Никто не ловит слоупоков? ;)

Подытожим действия

  • Создать проект в Git (GitHub, BitBucket, Visual Studio Online, не принципиально)
  • git clone [url-репозитория]
  • Перейти в папку проекта
  • Инициировать NPM и установить зависимости:
    • npm init -y – в случае нового проекта
    • npm install – в случае клонирования проекта с уже установленными модулями
  • code .
  • ... у нас инициирован проект, открыт редактор, можно начинать кодить решение!

Опубликовано: 29.08.2016
Автор: Андрей Кольтяков