Как правильно сегодня собрать браузерный ES6?

Question

[Arman]

ДД.
Вот и дали добро полностью мигрировать на новый ES, давно изучал этот вопрос, были тесты, но уже многое забыто и много что обновилось, поэтому решил уточнить.

Используется связка:
1. Bootstrap 4.1

"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]

2. Vue.JS

Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8.

Выходит минимум IE10.

Дальше https://kangax.github.io/compat-table/es6/ нам говорит, что без полифилл можно юзать ES6, но минус IE11

И вот первый вопрос: если нет планов поддерживать IE11, то есть смысл использовать babel и все такое? Как тогда должно все работать? просто подключить ./index.js или все js-файлы нужно подключить перед ./index.js? Как работает import в таких условиях? Как правильно все склеить и минифицировать через gulp?
- - - - - -

Дальше вроде все работает, но приходит задача в новом проекте добавить все же IE11 и ниже, для этого естественно нужно будет babel, есть ли смысл собирать для всех браузеров? или можно как-то условия сделать <!--[if lt IE11]> чтоб подключить babel вариант только для IE? может хватит просто подключения babel-polyfill.js к страницам если IE?
Цель: максимум юзать нативный ES6 браузеров и только для IE делать исключения, которые завтра можно будет отключить
- - - - - -

По статьям понял что ES6 больше юзают с webpack, но в данный момент сильно привязаны к gulp (gulp-ssh, gulp-ftp и т.д.), есть смысл переезда на webpack? или можно как-то часть задач через gulp передать webpack? может просто стоит остаться на gulp?

Answer 1

[Александр Таратин]

На webpack стоит переходить хотя бы ради адекватной инкрементальной пересборки в watch режиме и горячей перезагрузки работающей одинаково для всех браузеров.

Вместо babel лучше использовать typescript в режиме совместимости с js для старого кода (babel генерит совсем уж шайтан кашу и гораздо медленнее собирает).
Новый код сразу на typescript писать. (подсказки в ide на выводе типов и @types/* для библиотек здорово ускоряют процесс написания и частично компенсируют отсутствие тестов в проекте, если за них не платят - то есть всегда :( )

Даже если ориентируетесь исключительно на новые браузеры, всегда стоит использовать транспиляторы на этапе сборки (typescript умеет это делать без записи выходных файлов) чисто ради проверки корректности кода и соответствия типов (уже это поможет выкинуть половину тестов из обычного js, ибо не зачем проверять в рантайме то, что уже проверил транспилятор).

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

Comments

[Arman]

Правильно ли я понимаю что сейчас typescript переводится в какой-то степени в ES6-7, а он (вместе с ним) в ES5 (babel)? Или typescript в какой-то степени поддерживается ES6-7, но опять же babel переводит в ES5? По сути все текущие Frontend проекты не работает на нативном ES6-7 браузеров?

[Антон Швец]

Arik, тайпскрипт скомпилирует во что укажете. Бабель ему не нужен.
Но в случае с Vue это вам не сильно поможет.
И зачем, vue-cli должен сам все настроить.

[Александр Таратин]

Arik, Typescript полностью обратно совместим с js. Любой валидный js код будет валидным ts кодом.
Авторы Typescript гарантируют что не будут ломать совместимость с будущими js стандартами.
Задать версию js в которую будет скомпилирован ts код можно через настройки.

Answer 2

[Алексей Алексеев]

- babel следует подключать по возможности всегда, хотя бы для обработки es7-8 фишек, которые вам понравятся, но еще не успели внедрить во все браузеры.
- webpack можно подключить через gulp. Вполне можно выполнять отдельные такси с помощью gulp, а что-то обрабатывать с помощью webpack`а. Так же можно, например, запускать отдельные npm скрипты для выполнения параллельной или последовательной работы gulp и webpack. Особо полезные фишки webpack (имхо): tree shaking, [name][hash].ext корректное именование файлов на выходе, динамический импорт файлов.
- делать отдельные сборки для старых и вечнозеленых браузеров можно. Подключать можно используя

<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

Подобный хак. Сначала подключаем сборку для браузеров, поддерживающих модули, и почти наверняка, весь es6 (e7-8 не обязательно, поэтому может потребоваться babel для транспилинга es7-8 в es6), а потом в качестве фаллбека подключаем файл в котором весь код преобразован в es5 (или ниже, если необходимо и возможно).

Comments

[Arman]

спасибо за ответ, примерно в эту сторону и смотрю.

выполнять отдельные такси с помощью gulp, а что-то обрабатывать с помощью webpack`а.

при такой связке кто должен смотреть/следить (watch)?

[Алексей Алексеев]

Зависит от задач. Допустим, обрабатываем с помощью webpack`а только js, тогда за src/*.js должен следить webpack, а за остальными gulp. Если что-то делаем с js дальше с помощью gulp`а, то за src/*.js следит webpack, который обрабатывает, а потом складывать в папку build/js, за которой уже следит gulp.
Это все скорее на уровне предположений, я пользуюсь сейчас полностью webpack`ом для всех задач, поэтому, возможно, есть нюансы, которых я не знаю.
Это если запускать как отдельные задачи. Есть также связки gulp-webpack, тут надо смотреть документацию, я ими не пользовался.
Как вариант можно посмотреть как настроено в https://github.com/tars/tars, у них есть возможность подключить webpack для js для отдельного проекта при инициализации и посмотреть как настроены таски для обработки js.

Answer 3

[Константин Китманов]

На вебпак переходить не обязательно, трaспиляцей там занимается тот же babel. Но не помешает:)
babel-preset-env умеет использовать browserslist примерно так же, как это делает postcss.