Комментарии 22
Поддержка async/await в браузерах уже давненько нативная, поэтому при разработке не имеет смысла их транспайлить в es5 => нет проблем с отладкой
Чтобы увидеть свои правки в браузере — надо собрать бандл.Ну да, hot reload вот взяли прям так и отменили во всей вселенной.
Посмотреть, во что скомпилировался TypeScript или SASS мы не можем.И кто это запретил? Вот почему-то опыта у меня не густо, я сразу задался этим вопросом и вопрос отпал. При это вы сами же и ответили на этот вопрос в виде source map.
Для SaSS – WebCompiler, который компилирует SASS в CSS при нажатии сохранении. Отредактировали строчку кода, нажали Ctrl+S — и мгновенно компилируется один единственный файл.Ну конечно, куда ведь удобнее ковыряться в одном файле вместо просмотра соответствующего source map. Конечно же удобно по всему проекту удобно имена классов задавать в 50 символов, дабы случайно не переюзать имя использованное ранее для других целей.
Дальше хватит писать, но подобные моменты есть и далее. Так что очень спорное предложение, просто проигнорировав альтернативы данному подходу, да и минусы в целом.
Вы пробовали отлаживать TypeScript по source map? Вот попробуйте.
Ого, опять новый инструмент в мире JS, как-то даже не верится!
Новый? Да ему уже дофига лет… вон, видео из 2015 года https://www.youtube.com/watch?v=NpMnRifyGyw
Вообще я сначала хотел написать, что единственный недостаток Webpack по сравнению с SystemJS — наркоманские конфиги, но потом вспомнил конфиг systemjs (в который еще гадит (простите, по другому назвать не получится) JSPM своей инфой) и передумал.
Поменяли в исходниках строчку кода — хотим быстро увидеть, как это работает в браузере.
C SystemJS вам нужно переключиться на вкладку браузера, нажать F5, дождаться, пока он загрузит и скомпилирует исходники. C Webpack достаточно переключиться на вкладку браузера, live/hot-reload гарантирует, что изменения я увижу автоматически, когда они будут готовы.
Напечатали символ, нажали «Ctrl + S» – собирается бандл. Ещё символ и «Ctrl + S», он снова запускает сборку. Итого 2 бандла собираются одновременно.
Нет, в вебпаке есть троттлинг. И я никогда не видел, чтобы два бандла собирались одновременно (хотя, наверное, этого можно достичь).
Вебпак – чёрный ящик. Настроили конфиг, вебпак заработал, собрал.
Системжс – чёрный ящик. Настроили конфиг, системжс заработал, собрал.
Посмотреть, во что скомпилировался TypeScript или SASS мы не можем.
А в SystemJS как это возможно? Там вообще всё в памяти.
Если очень уж надо — собираем без минификации (закомментить одну строку в конфиге) и смотрим.
Для SaSS – WebCompiler, который компилирует SASS в CSS при нажатии сохранении.
Есть опция компилировать при сохранении – то же самое, обрабатывается один единственный файл и также мгновенно.
"А за такое можно и канделябром-с..." IDE-зависимая сборка — всегда плохая идея. На дженкинсе студии с плагинами Ctrl+S нету:)
Скорость отображения в браузере – мгновенная. Время компиляции одного файла стремится к нулю.
Webpack не самый быстрый парень по сю сторону джаваскрипта, это правда. Например, новичок ParcelJS, если верить бенчмаркам, куда шустрее. Но это касается только холодного старта, инкрементальные ребилды в процессе разработки занимают столько же, сколько Alt+Tab на браузер и переключение внимания человека. Проблема с полной пересборкой TS решается использованием awesome-ts-loader.
Кстати, rollup сам из коробки или c минимальными плагинами умеет в watch с live-reload. systemjs/jspm тут лишние.
JSPM, который избавляет нас от необходимости разбираться с конфигурацией
Во-первых, два менеджера пакетов в одном проекте (а еще какой-нибудь nuget/pip/composer/gem) это грустно. Во-вторых, последний раз когда я это дело пробовал, время от времени всплывали какие-то мутные проблемы с теми или иными пакетами из npm — то не ставится, то вручную надо shim прописывать. Так что нет, спасибо.
А в SystemJS как это возможно? Там вообще всё в памяти.
Вы имеете ввиду загрузчик TypeScript для SystemJS, который компилирует на лету. В моем варианте компиляция происходит отдельно от SystemJS, она работает уже с готовым JS.
IDE-зависимая сборка
Ну разумеется отдельная галп-таска для компиляции. Плагины IDE только во время разработки.
изменения я увижу автоматически, когда они будут готовы
Всегда интересовало, как Вы определяете, что изменения уже применились? Допустим, если они визуально не заметны.
Всегда интересовало, как Вы определяете, что изменения уже применились? Допустим, если они визуально не заметны.
В консоли видно — она ведь все равно всегда открыта при разработке.
Честно скажу, hot-reload не панацея, он не со всем справляется и иногда все-таки приходится делать F5, но это обычно раз или два в неделю. Но вообще он здорово ускоряет разработку хотя бы за счет отсутствия потери потока и фокуса разработчика. Очень советую попробовать, хотя понимаю, что это не ваша специальность.
я имею ввиду что-то именно технологически важное, т.е. не в духе «там надо настраивать а тут из коробки», а, скажем «дебаг TypeScript исходников в браузерном дебаггере»
Использовать commonjs- и es6-модули.
systemjs основан на https://www.npmjs.com/package/es6-module-loader, эта либа умеет загружать модули без транспиляции (т.е. babel и не нужны, если из es6 вы юзаете только модули).
Не вебпаком единым