Babel and Browserify/Webpack confusion

Question

Быстрый вопрос. Я немного смущен ES2015 (ES6).

Предположим, я использую Babel для компиляции в ES6 Javascript для совместимых ES5 для текущих браузеров.

импорт/экспорт функции уже доступны в ES6 с помощью Babel. Так почему мне нужно что-то вроде Browserify или Webpack, если бы я просто использовал их, чтобы объединить мои модули, когда ES6 мог сделать это для меня?

Везде, куда я иду, я вижу людей, использующих Babel в сочетании с Browserify или Webpack. Хотя я знаю, что что-то вроде Webpack можно использовать для большего, но мне интересно, можно ли также связывать файлы с использованием синтаксиса ES6.

Возможно, я был совершенно не в порядке, и я, возможно, потерялся в Javascript Jungle 2016 года, поэтому я надеюсь, что кто-то может это сделать для меня.

Редактировать

Правильно ли я предположить, что нативный функциональность ES6 импорт/экспорт просто не расслоение файлов? Из того, что я прочитал до сих пор, я думаю, что вам все равно нужно включать все отдельные файлы Javascript, но вы просто импортируете модули в пространство имен других, используя собственные функции импорта?

Answer 1

Pre-ES6 не имеет встроенной системы модулей, поэтому существует несколько систем, построенных в коде пользователя (например, модули CommonJS/Node и AMD). Это то, что Babel преобразует синтаксис модуля ES6 в (и да, вы правы, что синтаксис модуля ES6 в любом случае не имеет родной истории связывания). Браузеры не знают эти API пользовательских прав. Узел реализует модульную систему, обернув «модуль» в функции, которая впрыскивает require() и т.д. В браузере require() будет просто ссылка ошибка. Browserify (или другой поставщик) заставляет его работать в браузере и связывает весь граф зависимостей с одним скриптом. Поэтому, если код для браузера, вы, вероятно, захотите его связать. Если это для узла, вам может и не понадобиться.

В функции импорта/экспорта

Не функции, декларации.

Если бы я просто использовал их, чтобы объединить мои модули, когда ES6 мог бы сделать это для меня?

Интересно, возможно ли связать файлы с использованием синтаксиса ES6.

Могу ли я предположить, что родная функция импорта/экспорта ES6 просто не связывает файлы?

Да. Не существует собственного способа объединить модули ES6. Вы можете перевести синтаксис модуля ES6 на что-то вроде модулей узла и расслоить их.

Из того, что я до сих пор читал, я думаю, что вам все равно нужно включать все отдельные файлы Javascript, но вы просто импортируете модули в пространство имен других, используя собственные функции импорта?

Важно понимать, что, хотя синтаксис стандартизован, большая часть поведения не является. В разработке есть спецификация Loader, чтобы указать, как модули будут фактически размещены и загружены.

См. Также https://stackoverflow.com/a/33044085/1034448.

Answer 2

Да, использование babel для перевода ваших ES6-импорт в ES5 будет работать.

Однако одним из преимуществ использования webpack является создание одного статического файла для обслуживания в рабочей среде.