webpack and gulp for my angular2 studying (update)

Как и обещал раньше расскажу про изменения в процессе изучения angular2 в свете выхода его релиза.

Я решил не переписывать предыдущий пост, а сделать новый.

Итак. В этом посте будет про установку зависимостей.

Для решения этой проблемы есть 2 основных пути:

  1. Взять конфигурационные файлы из раздела Getstarted на angular.io.
  2. Установить глобально angular2-cli и использовать его возможности.

При использовании angular2-cli проект создается из консоли командой

ng new <projectname>

и при этом устанавливаются нужные конфигурационные файлы, устанавливаются нужные npm пакеты.

Дополнительно становятся доступными команды генерации angular-элементов — директивы, сервисы, компоненты и т. п.

Я только начал экспериментировать с ними, поэтому пока что пропущу эту тему.

Сейчас я пользуюсь первым способом — копированием настроек из раздела Getstarted на angular.io.

Я коприрую содержимое package.json, в такой же, но уже у себя в рабочем каталоге.

Убираю пакеты, которые не буду использовать: systemjs из раздела dependencies, concurrently и lite-server из раздела devDependencies.

Запускаю установку командой npm install.

После завершения устанавливаю свои пакеты. Все они идут в package.json в раздел devDependencies, поэтому вся установка с флагом

--save-dev
1gulpзамечательный таск менеджер для управления проектом
2gulp-sassдля сборки sass/scss в css
3gulp-shellдля выполнения команд консоли и, в частности, запуска npm скриптов
4rimrafдля удаления каталогов (rm -rf для node)
5run-sequenceдля синхронного запуска тасков галпа
6webpackдля сборки проекта в бандлы
7webpack-dev-serverдля запуска локального веб-сервера для тестирования разработки, замена lite-server, мне в принципе не так уж и необходимо, но иногда бывает полезно
8awesome-typescript-loaderвебпак-лоадер для typescript файлов при сборке проекта вебпаком
9angular2-template-loaderвебпак-лоадер, который позволяет инклудить html темплейты и css в компонент, передает результат в typescript лоаде
10angular2-router-loaderвебпак-лоадер, который позволяет загружать роуты из модулей, а не писать один большой роут с children элементами
Порядок цепочки получается таким awesome-typescript-loader, angular2-template-loader, angular2-router-loader.
То есть, учитывая что цепочка обрабатывается справа на лево, то получается вначале загружаются роуты, потом инклудятся шаблоны и потом уже вступает в дело awesome-typescript-loader.
11html-loaderвебпак-лоадер, который конвертит html в строку, попутно минимизируя ее. Нужен для работы angular2-template-loader. Можно вместо использовать raw-loader
12file-loader
вебпак-лоадер он копирует файл (указывается в параметре name) и возвращает путь к этому файлу, используется для нормальной работы подключаемых изображений, шрифтов и т. п.
13extract-text-webpack-plugin
в данном случае используется для сборки нескольких css в один
14style-loader
используется extract-text-webpack-plugin, в основном для обработки тэгов <style>
15css-loader
используется extract-text-webpack-plugin для обработки css (например, замена url(img.png) на require)
16webpack-merge
используется для мержа конфигураций вебпака

В результате package.json получается примерно такой:

{
  "name": "angular2-webpack-studying",
  "version": "1.0.0",
  "description": "studying angular2",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080 --content-base=dist/",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "build.dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail",
    "postinstall": "typings install",
    "typings": "typings",
    "gulp":"gulp"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.0.2",
    "@angular/compiler": "~2.0.2",
    "@angular/core": "~2.0.2",
    "@angular/forms": "~2.0.2",
    "@angular/http": "~2.0.2",
    "@angular/platform-browser": "~2.0.2",
    "@angular/platform-browser-dynamic": "~2.0.2",
    "@angular/router": "~3.0.2",
    "@angular/upgrade": "~2.0.2",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "angular2-router-loader": "^0.2.2",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2",
    "gulp-shell": "^0.5.2",
    "gulp-sourcemaps": "^1.6.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "run-sequence": "^1.2.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }
}

Хочу предупредить — как видно версии зависимостей не ограничены сверху и, выполнение npm update может привести к тому, что проект перестанет собираться.

Дальше настраиваю конфиги для вебпака и gulpfile.js для управления — напишу в седующи раз.

P.S.
С вебпаком я тоже познакомился недавно, поэтому, например, не совсем представляю пока что происходит на самом деле внутри лоадеров — для меня это «черный ящик» — вход-выход.

Хотя есть, как говорят, хороший скринкаст на эту тему (ссылку можно найти на learn.javascript.ru). В расписание себе я уже добавил — обязательно посмотрю )))

Leave a Reply

Your email address will not be published. Required fields are marked *