Подготовка компьютера для 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
Автор: Андрей Кольтяков