Webpack, Gulp, Angular, Karma и Protractor работают вместе, чтобы дать толчок вашему следующему проекту.
Зачем вообще заморачиваться с Webpack?
Если вы разработчик AngularJS, у вас, вероятно, есть стек, похожий на этот:
— Angular.js (конечно)
— Gulp/Grunt (кстати. что вы предпочитаете?)
- Jasmine/Mocha, запущенный Karma для модульного тестирования
- Protractor для тестов E2E
- JSHint/JSLint
- Lodash/Underscore
- МЕНЬШЕ/SASS
Все покрыто. Сборка для разработки, производственная сборка, запуск тестов, обеспечение качества кода и т. д.
Так что же такое Webpack?
Это сборщик модулей. Я чувствую замешательство некоторых из вас. Так что же такое сборщик модулей? Это инструмент, который берет ваши исходные коды и упаковывает их в отдельные файлы, имеющие дело с зависимостями, аннотациями и минификациями одновременно.
Почему Webpack может быть полезен?
Потому что это как портал в мир npm со всем его богатством. Чтобы привести вам практический пример. Недавно я искал способ правильно обрабатывать новые ответы json с разделителями строк на клиенте. Я решил использовать библиотеку https://ndjson.org/, но не было клиентского JavaScript-решения. Вместо этого я использовал Webpack, который сделал тяжелую работу по доставке серверной библиотеки клиенту. Было очень легко, весело и продуктивно.
Если Webpack такой мощный, нужен ли мне Gulp/Grunt?
Хотя Webpack отлично подходит для объединения (сборки) производственного проекта, лично я предпочитаю комбинировать его с Gulp. Причина в четком разделении интересов. Я использую Webpack для связывания моего кода js с поставщиками, шаблонами html и стилями LESS, а для всего остального я использую Gulp, поэтому управляю своими активами, запускаю тесты, запускаю различные сборки, запускаю сервер разработки, отслеживаю изменения и т. д.
Как я могу начать с Webpack?
Я подготовил для вас готовый стартовый посевной проект. Вы можете получить его с GitHub: production-angular-webpack-gulp
Резюме
Плюсы:
+ полный доступ к модулям npm
+ использование одного и того же кода на клиенте и сервере
+ простое управление зависимостями
+ четкое разделение проблемы в процессе сборки
+ загрузка ресурсов в стиле require.js
+ одно место для оптимизации производства
Минусы:
— Большие проекты с поставщиками требуют индивидуальной настройки, иначе процесс сборки будет медленным.
— Требуется некоторое время, чтобы привыкнуть к синтаксису `require`
Вы используете вебпак. Если бы не вы? Позвольте мне знать в комментариях ниже.
Нужна профессиональная разработка AngularJS? Напишите мне.
