webpack and gulp for my angular2 studying (update)

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

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

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

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

Взять конфигурационные файлы из раздела Getstarted на angular.io.
Установить глобально 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

[table id=1 /]

В результате 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 Cancel reply