JSPM vs WebPack для Angular 2 - программирование

Недавно я использовал JSPM для моих проектов angular 2 и нашел, что это очень просто и удобно для работы. И когда дело доходит до добавления новых модулей и создания пакета для использования в производстве.

В основном это просто:

jspm install npm:@angular/somepackage

и config.json и system.js автоматически обновляются для меня.

Когда я хочу создать производственный пакет, я просто делаю это:

jspm bundle-sfx app/main app-bundle.min.js --minify

И чтобы использовать его, я просто создаю html, как это:

 <body>
   <my-app>Loading...</my-app>
   <script src="app-bundle.min.js"></script>
 </body>

Он загружается и работает быстро. Используется как для малых, так и для больших приложений angular 2.

Настройка разработки также является удовлетворительной - перезагрузка приложения достаточно быстро, и отладка идет хорошо. Также очень хорошо иметь возможность использовать практически любой модуль из репозитория NPM через JSPM.

Когда вы читаете статьи, у меня создается впечатление, что люди переходят на webpack для angular 2 приложений. Я не перешел на webpack сам, потому что я думаю, что моя настройка работает нормально, а webpack кажется намного более сложной.

Тем не менее я обеспокоен тем, что поддержка JSPM будет исчезать, поскольку кажется, что все больше и больше переходят на webpack.

Должен ли я переключиться на веб-пакет из-за этого? Переключение на webpack даст мне некоторые преимущества, которые я не обнаружил?

У меня есть очень простые шаблоны быстрого запуска angular 2, демонстрирующие мою настройку, которые можно найти здесь: https://github.com/fintechneo/angular2-templates

Был бы очень рад получить некоторые мнения о преимуществах перехода на webpack для этой настройки.

ОБНОВЛЕНИЕ 2017-03-26

Поскольку этот вопрос был отправлен, я обнаружил необходимость еще более быстрого времени загрузки для производственных сборок. Несмотря на то, что JSPM (или webpack) создает оптимизированный пакет, он все еще слишком велик и нуждается в создании шаблонов angular2 после загрузки пакета.

Итак, я нашел поваренную книгу компилятора Ahead of the Time (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) - которая создает небольшие пакеты, которые начинаются в мгновение ока после загрузка.

Для этого потребовалась установка parallell, хотя все модули angular были установлены с использованием npm (не jspm). Вероятно, можно использовать JSPM для этого тоже с некоторыми усилиями, но я еще не изучил его. Как JSPM, так и эта кулинарная книга AoT используют накопительный пакет, поэтому он должен был бы интегрировать шаг компилятора ngc с JSPM, но сложной задачей является получение TypeScript для использования jspm_packages, а не node_modules.

Ссылка выше с настройкой обновляется с помощью AoT и по-прежнему использует JSPM для среды dev.

Ответ 1

Этот ответ требует разбивки следующим образом.

SystemJS v JSPM

JSPM - это, по сути, SystemJS с тем преимуществом, что JSPM настраивает для вас ваш systemjs.config.js. Я люблю JSPM, когда он работает (что, к сожалению, не всегда).

Преимущество здесь в том, что JSPM также связывает ваши JS файлы для вас.

JSPM v Webpack

Учитывая, что JSPM фактически использует SystemJS под капотом, этот вопрос по существу должен использоваться с SystemJS или Webpack.

Не снова! Я ответил на это раньше (верхний ответ) здесь.

Каковы различия между SystemJS и Webpack?

Кратким повторением этого содержимого является то, что Webpack не заменяет SystemJS (или JSPM), он просто делает их избыточными.

Однако здесь есть твист, в котором JSPM обеспечивает связывание. Итак, зачем переходить в Webpack?

Преимущество JSPM - простота настройки.

Эта же польза также является ее падением, поскольку простота настройки означает отсутствие опций и отсутствие опций - отсутствие контроля.

Webpack не только связывает файлы JS, но также связывает CSS, HTML и все остальное в одном файле bundle.js, который (после кэширования) делает приложения Webpack молниеносно (но медленно загружается изначально).

Кроме того, JSPM удовлетворяет потребность в связке, но как вы собираетесь пересылать файлы с помощью JSPM? например Если я хочу использовать Stylus вместо CSS, то что будет переводить мои файлы Stylus в CSS? Я собираюсь бросить Gulp в микс (который у меня убит горем, теперь имеет 1/3 загрузки Webpack, но он вел 6 месяцев назад). Или переключиться на Webpack?

Я не поклонник Webpack из-за его плохих документов, но учитывая, что у него такая огромная доля на рынке, я думаю, что мы все скоро будем прыгать на лодке Webpack.