Как это работает с babel, webpack или браузерами в целом?
Babel и Webpack следуют спецификации ES и переносят оператор import / export в один файл. Поскольку они также поддерживают синтаксис require, они обычно переносят операторы import в вызовы require() и операторы export в module exports, а затем поставляются с пользовательским загрузчиком для модулей. Если вы получили, например, :
// A.js
export default function() { }
// B.js
import A from "./A";
A();
Затем он преобразуется в следующий синтаксис require:
//A.js
exports.default = function() {};
//B.js
var A = require("./A").default;
A();
Это может затем быть обернуто во что-то вроде:
(function() { // prevent leaking to global scope
// emulated loader:
var modules = {};
function require(name) { return modules[name]; }
function define(name, fn) {
var module = modules[name] = { exports: {} };
fn(module, module.exports, require);
}
// The code:
define("A", function(module, exports, require) {
// A.js
exports.default = function() { };
});
define("B", function(module, exports, require) {
// B.js
var A = require("A").default;
A();
});
})();
как эти вещи развивались в javascript?
Несколько лет назад написание JS было ограничено браузерами, и единственный способ загрузить несколько источников js - это использовать несколько тегов <script> и использовать глобальный объект для обмена функциями. Это было некрасиво.
Затем были изобретены Nodejs, и им нужен был лучший способ работы с модулями, и они изобрели вещь require().
Авторы спецификации увидели потребность в собственном синтаксисе для этого, поэтому было введено import / export.
Вавилон и другие тогда писали транспортеры.