Do es6 модули отрицают необходимость для браузера/webpack?

Question

Модули ES6 позволяют нам создавать модули кода, которые могут быть экспортированы и импортированы как зависимости.

Browserify и Webpack делают то же самое. Так ли я прав, предполагая, что если я использую ES6 вместе с чем-то вроде babel, чтобы перекрыть мой код, то веб-пакет и браузер не нужны?

Answer 1

Если вы используете его в браузере, вам по-прежнему нужен веб-пакет или браузер.

Давайте посмотрим на пример:

Следующая

import * as name from 'name.js'; 

превращается в:

'use strict'; 

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } 

var _nameJs = require('name.js'); // Here, a function named "require" is still needed 

var name = _interopRequireWildcard(_nameJs); 

Check it out in the Babel Repl

Как вы видите, столпотворение полагается на CommonJS Способ require (действительно любая реализация) для импорта. Поскольку node.js реализует CommonJS, он будет работать, но ни один браузер в настоящее время не реализует его. AFAIK тоже нет any browsers that support ES 6 Modules natively.

Answer 2

Как подробно here - модули ES6 имеют два аспекта:

Стандартный модуль ES6 имеет две части:

• декларативного синтаксиса (для импорта и экспорта)
• ПРОГРАММНЫЕ-погрузчик API: для настройки загрузки модулей и условной нагрузки модули

Вавилон обрабатывает только первый аспект - т.е. декларативный синтаксис для импорта и экспорта и не предоставляет свой собственный загрузчик.

То, что люди, использующие модули ES6 сегодня делают, как правило, один из следующих:

• Использование Бабель для transpile ES6 модулей синтаксис для существующей реализации модуля, как CommonJS/AMD и соответственно доступный инструмент, как Webpack/browserify/requirejs можно использовать для загрузки/объединения js-активов.
• В качестве альтернативы есть такие погрузчики, как SystemJS, которые обеспечивают поддержку API-интерфейса загрузчика программ (через ES6 module loader polyfill. Используя этот инструмент, вы можете избавиться от Browserify/Webpack, но на данный момент вы просто меняете один инструмент на другой. что все больше и больше библиотек, таких как модули ES6 Aurelia жмутся и рекомендовать стандартизированный System.import синтаксиса -. SystemJS будет парить в популярности

Другого аспектом является совместимостью с существующей экосистемой модулей (особенно на НОМ) Следует отметить, что. вы не теряете совместимость с существующей экосистемой с любой из стратегий: и webpack, и SystemJS позволяют загружать и связывать commonjs как а также модули AMD.

Что касается связывания активов, то постоянная поддержка соединений в HTTP 2 уже заметно уменьшает значение конкатенации файлов javascript. Хотя устранение мертвого кода после обнуления полного пакета javascript по-прежнему остается ценной оптимизацией.

Как неоднократно указывали авторы инструментов, такие как Rollup, статически анализируемый характер модулей ES6 делает дробление и уничтожение кода более эффективным.