Как правильно собирать проект на Angular2?

#javascript #angularjs #gulp #angular2 #webpack

Более двух лет я писал приложения на Angular 1 - 1.5 и использовал для собрки gulp.
Сейчас я решил изучить Angular 2 и распространенный сегодня webpack. В процессе изучения
узнал о cli для генерации приложений на Angular 2 и автоматизации создания компонентов,
сервисов и т. д. Мне показалось это безумно удобным, но в то же время появилось два
вопроса. 


Означает ли использование cli, что мне не нужен ни gulp, ни webpack? Или есть смысл
каким-то образом комбинировать эти инструменты? Если да, то как это делаете вы? 
Допустим, я сгенерировал каркас приложения при помощи cli, создал какие-то компоненты,
написал некоторое кол-во кода, и тут я понимаю, что хочу использовать другой препроцессор
css, переименовать ряд компонентов и директив, создать новые модули и таким образом
изменить файловую структуру проекта. Не станет ли это проблемой? И смогу ли я после
этого продолжать использовать cli?


PS: Я понимаю, что cli работает на основе webpack, поэтому странно говорить, что
использовать cli, значит отказаться от webpack. Но где искать конфигурационный файл
webpack? Что, если я хочу автоматизировать заливку файлов по ftp, компиляцию jade или
делать что-то еще, чего нет по умолчанию в cli?
    

Ответы

Ответ 1

По первому вопросу:
Если вы создали каркас проекта при помощи cli, то использовать gulp и webpack уже
не нужно. Порядок сборки и развёртывания таков:


Переходим в корневой каталог проекта
npm install - устанавливаем пакеты
ng build --prod --aot - собираем проект
В папке /dist корневого каталога будет лежать собранный проект.
При желании миницифицируем полученные файлы
Заливаем содержимое папки /dist на веб-сервер
Вуаля


По второму вопросу:
Для того, чтобы вытащить webpack.config, в корневом каталоге проекта, сгенерированного
при помощи cli, выполните:

ng eject

В результате в консоли выведется сообщение о том, что извлечение проведено успешно,
и что теперь для запуска проекта нужно использовать npm run build... etc а в корневом
каталоге получите сгенерированный webpack.config, который можете конфигурировать как
вам угодно. Следует отметить, что ng serve и прочие подобные команды использовать уже
не сможете, а после извлечения в package.json добавится ряд новых пакетов, следовательно,
перед запуском приложения после проведения извлечения, необходимо будет запустить npm
install.
Следовательно, алгоритм таков:


Переходим в корневой каталог проекта
ng eject
Проверяем наличие webpack.config
Вносим необходимые изменения
npm install
npm run build
Вуаля :)