Архитектура в angular2?

Question

[Сергей]

Ребят, подскажите что почитать, чтоб правильно собрать сборку в связке gulp+webpack+angular2. А то по туториалам нахожу только стандартный npm start

Comments

[Виталий]

Это потому, что стандартная установка делается через angular-cli - в одну строчку (ng new). webpack стоит использовать, чтобы не обновлять каждый раз страницу при минимальных изменениях - webpack обновляет только нужный модуль.

[Сергей]

Виталий: Я правильно понимаю, что вся разработка на 2 крутится та cli?

[Андрей]

Сергей: для 80% его хватит.
Если необходим гибкий и настраиваемый конфиг, вот: https://angular.io/docs/ts/latest/guide/webpack.html
Если хотите, можете придумать и для гапла там задачу. Пусть мух, например, считает :)

[Сергей]

Андрей: А не подскажешь как подключить saas файлы глобально?

[Сергей]

Андрей: через angular cli

[Андрей]

Сергей: вы хотите объявить переменные глобально и потом использовать их в компонентах?
Возможно и есть какой-то способ это сделать, но сама компонентная идеология Ангуляра этого подхода не поддерживает. В вашем компоненте появляются зависимости, не описанные в самом компоненте. Это плохо для реиспользования компонента. Поэтому предполагается, что вы все зависимости импортируете в тот файл, в котором они используются.

[Сергей]

Андрей: т.е скажем файл _variable.scss я должен постоянно импортить в компоненту ? @ import 'variable'?

[Андрей]

Сергей: ну да, если в файле используются переменные из _variable.scss, то надо его непосредственно в этом файле подключать через import
Мы абсолютно аналогично делаем с библиотеками JS, если нужна какая-нибудь lodash, то ее (точнее ее метод, но не суть) придется импортировать в тот модель, где она нужна. И в другой модуль ее так же придется импортировать.

Answer 1

[Yuriy Berg]

Зачем тебе использовать и Gulp и Webpack, можно обойтись например одним Gulp + BrowserSync.

Пишешь tsconfig.json отдельно для TS файлов, указываешь место компиляции.
В gulpfile.js пишешь пути для таблиц стилей и для HTML в ту же папку как и tsconfig.json
**/*.html, **/*.css.
Подключаешь все в package.json. То есть пишешь команду для npm start.

"start" : "tsc --watch \" gulp  \" \" browserSync \" "

Проект будет собираться туда, куда нужно. В зависимости от твои указанных, путей. И все будет работать с перезагрузкой, если ты используешь GULP Watch.

И попробуй хотябы разабраться в том что такое Webpack, Gulp и NodeJS.
Вот тут парень с хорошей лексикой объясняет что к чему (на русском)
https://www.youtube.com/user/iliakan/playlists

Comments

[Сергей]

Я знаю, что такое, галп, вебпак и т.п. Меня в ступор сбил ts с его компиляцией файлов после каждого сохранения и создания map

[Yuriy Berg]

Сергей: Когда я начинал с ним работать, я тоже так думал:)
https://www.typescriptlang.org/docs/handbook/tscon...

[Yuriy Berg]

Сергей: Посмотри как реализованна компиляция, в Angular-quickstart, более подробно.