Следующий код включает динамический импорт тест, Object
тест, Symbol
и Promise
тесты.
import $ from 'jquery';
$('#TestDynamicImport-Button').on('click', () => {
loadModule();
});
async function loadModule() {
const MODULE = await import('./TestModules/TestJsModule');
console.log(MODULE.TEST1);
}
// Promise test
let promise1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});
console.log('Promise Test: ' + promise1);
// Symbol test
let obj = {};
obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";
for (let i in obj) {
console.log(i); // logs "c" and "d"
}
// Object test
let obj1 = { foo: "bar", baz: 42 };
let map = new Map(Object.entries(obj1));
console.log(map); // Map { foo: "bar", baz: 42 }
Как вы знаете, Promise
, Object
и Symbol
не поддерживаются в IE, и для обеспечения этой поддержки требуется polyfill .Недавно, чтобы обеспечить поддержку динамического импорта (import()
) и asyc
/ await
, я добавил syntax-dynamic-import
и transform-runtime
плагины babel (ниже приведен код конфигурации веб-пакета):
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['env', {'modules': false}]
],
plugins: [
'syntax-dynamic-import',
'transform-runtime'
]
}
}
],
exclude: /node_modules/
}
]
}
};
Хотя я не использую polyfill в этом примере, в консоли IE нет ошибок до динамического импорта (другими словами, Object
, Promise
и Symbol
работают в IE благодаря transform-runtime
):
![enter image description here](https://i.stack.imgur.com/HVbK2.png)
Однако, если попробовать динамический импорт (в данном примере - нажатием кнопки), возникнет ошибка Error: “ReferenceError: Promise is not defined”
.
![enter image description here](https://i.stack.imgur.com/hw69R.png)
(定義されていません
означает not defined
)
Как вы можете это объяснить?Promise
отлично работает до динамического импорта ...
let promise1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});