Я хочу понять:
- Как Webpack компилирует и «упаковывает» модули JavaScript в окончательный комплект (какой тип JavaScript-кода он использует)?т.е. как можно кодировать из одного модуля код доступа из другого модуля в том же пакете (при условии, что до объединения этот код использовал оператор
import
для импорта и использования «другого» кода)? - Возможно ли, чтобы код из одного пакета получал доступ к коду из другого пакета без использования глобальной переменной?
- Если мы используем разбиение кода, и два пакета используют один и тот же код, скажем третийparty npm module, будет ли этот модуль включен в оба комплекта?
ОБНОВЛЕНИЕ: Я проверил официальные документы Webpack и нашел упрощенную реализацию Webpack под названием Minipack .Я написал следующий код, чтобы проверить, как он работает:
constants.js
export const testVar = 'some value';
app.js
import { testVar } from './constants.js';
const copiedVar = testVar;
Вот пакет, созданный Minipack для вышеcode:
(function (modules) {
function require(id) {
const [fn, mapping] = modules[id];
function localRequire(name) {
return require(mapping[name]);
}
const module = { exports: {} };
fn(localRequire, module, module.exports);
return module.exports;
}
require(0);
})({
0: [
function (require, module, exports) {
"use strict";
var _constants = require("./constants.js");
var copiedVar = _constants.testVar;
},
{ "./constants.js": 1 },
], 1: [
function (require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var testVar = exports.testVar = 'some value';
},
{},
],
})
Я понимаю, что каждый модуль JS находится в какой-либо функции, и весь этот пакет в основном является IIFE.Но я не могу по-настоящему понять все это и как именно это работает.Кто-нибудь может объяснить выходной пакет в деталях (пошагово)?