Предоставляет ли Babel Runtime Tansform поддержку объектов, обещаний и символов в IE? - PullRequest
0 голосов
/ 06 июня 2018

Следующий код включает динамический импорт тест, 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

Однако, если попробовать динамический импорт (в данном примере - нажатием кнопки), возникнет ошибка Error: “ReferenceError: Promise is not defined”.

enter image description here

(定義されていません означает not defined)

Как вы можете это объяснить?Promise отлично работает до динамического импорта ...

let promise1 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 100, 'foo');
});
...