Как получить импорт/модули ES6/2015, работающие в браузерах?

Question

Я не могу получить ES6/2015 imports для работы. Из this Understanding ECMAScript 6 book, я понимаю, что нужно писать свои <script> тегов с type атрибутом modules:

<script type="module" src="module.js"></script> 

Тогда я могу использовать import в module.js. Однако он не работает с последними версиями Firefox (v48.0.1) и Chrome (v53.0.2785.89). На консоль ничего не записывается, когда я поставил оператор console.log в module.js.

Как я могу использовать механизм импорта ES2015 в браузере (изначально, не используя что-то вроде babel/webpack)?

UPDATE: Похоже Microsoft's Edge browser supports modules, по крайней мере, в экспериментальном режиме. Почему другие браузеры не поддерживают его, по крайней мере, в экспериментальном режиме?

Answer 1

Вы не можете. Синтаксис и контракт были определены в спецификации ECMAScript, но реализация не существует в какой-либо крупной среде выполнения.

Пока какая-либо платформа не предоставляет встроенный объект System и связанную с ним загрузку модуля, вы застряли в Webpack или что-то похожее на polyfill.

Хотя это может показаться драматическим упущением со стороны браузера, эта функция достаточно проста, чтобы полилизовать.

Answer 2

На данный момент import и export Элементы ES6 не поддерживаются ни одним браузером (см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export для получения дополнительной информации об этом).

Вам необходимо использовать компилятор, который преобразует ваш код с использованием этих ключевых слов, один из наиболее распространенных и используемых babel.