Веб-пакет неявных блоков поставщиков / манифестов в IE11 - Promise не определен

Укороченная версия

Когда я запускаю свое приложение в IE11, я получаю сообщение об ошибке Promise is undefined из файла manifest.js.

Как мне добавить babel-polyfill или аналогичный такой, что он запускается до выполнения манифеста?

Длинная версия

Я пытаюсь добавить CommonsChunkPlugin в конфигурацию моего веб-пакета, чтобы разделить сторонние сценарии (пакет npm) в отдельный пакет. В соответствии с документацией Webpack 2 я настроил " объединенные неявные общие блоки поставщиков и файл манифеста ", который хорошо работает в современных браузерах.

Я написал функцию, обеспечивающую включение фрагментов в мой индексный файл в правильном порядке (см. Ниже).

Немного предыстории моих двух явных точек входа:

  • legacy_libs - Старые библиотеки, которые помещаются в глобальное пространство имен с script-loader, Я надеюсь постепенно избавиться от них
  • main - Моя главная точка входа в приложение

Два других (vendor и manifest) являются неявными и создаются с помощью CommonsChunkPlugin.

Когда я запускаю это с IE11, я получаю ошибку: Promise is undefined, Кажется, это происходит потому, что сам манифест веб-пакета вызывает new Promise(),

В моей основной точке входа у меня есть import 'babel-polyfill';, До того, как я добавил блок поставщика и манифеста, это позволило мне преодолеть отсутствие обещаний в IE. Но теперь, когда я загружаю файл manifest.js первым, я не могу понять, как включить его в правильном порядке.

Мой конфиг выглядит так:

module.exports = {
  entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js'
  },
  ...
  plugins: [
    // Extract third party libraries into a separate vendor bundle.
    // Also extract webpack manifest into its own bundle (to prevent vendor hash changing when app source changes)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),

    // Generate index.html file.
    // Include script bundles in the right order based on chunk name prefixes.
    new HtmlWebpackPlugin({
      template: 'app/index.ejs',
      chunksSortMode: function (a, b) {
        const chunkOrder = ['manifest', 'vendor', 'legacy_libs', 'main'];
        const aChunk = chunkOrder.findIndex(chunk => a.names[0].startsWith(chunk));
        const bChunk = chunkOrder.findIndex(chunk => b.names[0].startsWith(chunk));
        const aValue = (aChunk > -1) ? aChunk : chunkOrder.length;
        const bValue = (bChunk > -1) ? bChunk : chunkOrder.length;
        return aValue - bValue;
      }
    })
}
Источник

2 ответа

Решение

Кажется, это проблема, появившаяся в Webpack 2.6.0, ошибка уже выпущена: https://github.com/webpack/webpack/issues/4916

Так что либо дождитесь выхода исправления, либо вернитесь к 2.5.1!

Источник

Я столкнулся с той же проблемой. Мой конфиг похож на ваш (вендор и манифест). То, как я решил это было добавить babel-polyfill в точке входа моего манифеста. Ваш entry должен выглядеть так:

entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js',
    manifest: 'babel-polyfill'
}

Это загрузит полифилл, чтобы его можно было использовать в файле манифеста.

РЕДАКТИРОВАТЬ: Использование этого вернул еще одну ошибку при сборке (хотя он отлично работает на dev-сервере):

ОШИБКА в CommonsChunkPlugin: при работе в обычном режиме нельзя использовать чанк без записи (манифест)

Исправили это, изменив точки входа и CommonsChunkPlugin так, чтобы это выглядело так:

entry: {
    legacy_libs: './app/libs.js',
    main: './app/main.js',
    'babel-polyfill': 'babel-polyfill'
},
...
plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: 'babel-polyfill'
    }),
]
Источник
Другие вопросы по тегам