Добавление event-source-polyfill в веб-пакет в aurelia

Question

У меня есть приложение, созданное в основном спа-центре asp.net с aurelia и webpack (на основе учебного пособия Роба Айзенберга). Он отлично работает на Chrome и Firefox, но в IE, который является основным браузером, который мне нужно поддерживать, у него есть проблемы с горячей перезагрузкой модуля. Я получаю эту ошибку:webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser

Я побежал npm install event-source-polyfillВ зависимости package.json, Я добавил:

    "webpack-hot-middleware": "^2.18.0",
    "event-source-polyfill": "^0.0.12"

Тогда по моему webpack.config.js, Я добавил

    module.exports = {
       entry: ['app': ['event-source-polyfill', 'aurelia-bootstrapper'],
          // ...
    };

как предложено здесь: https://github.com/jods4/aurelia-webpack-build/wiki/Polyfills

Я также добавил

    new webpack.ProvidePlugin({
           es: 'event-source-polyfill'
       }),

внутри plugins из webpack.config.jsТогда я импортировал import 'event-source-polyfill/src/eventsource.min.js', мой event-source-polyfill живет внутри папки node-modules. Я должен вручную скопировать это куда-нибудь? Тогда как мне на самом деле использовать это? Я не знаю, что делать в aurelia, чтобы сказать, что нужно использовать этот polyfill для IE. Пока ошибка все та же.

Answer 1

Прежде чем я отвечу на ваш вопрос, позвольте мне сказать, что Алекс Таран прав, HMR не будет работать с IE, даже если вы добавите полифил источника событий, и никто, способный заставить его работать с IE, не заинтересован в этом.

Тем не менее, актуальный вопрос заключается в том, как добавить полифилл источника событий через webpack, и это действительно можно сделать. Вот как.

Внизу твоего webpack.config.jsфайл вы найдете раздел плагинов. Вам нужно добавить или изменитьwebpack.ProvidePluginкак показано. В этом фрагменте кода добавлен jquery, а строка для плагина источника событий закомментирована.

    plugins: [
        new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
        new webpack.ProvidePlugin({
            //"window.EventSource": ['event-source-polyfill', 'EventSourcePolyfill'],
            $: "jquery", jQuery: "jquery", "window.jQuery": "jquery"
        }),
        new HtmlWebpackPlugin({ template: 'Views/Shared/_LayoutTemplate.cshtml', filename: "../../Views/Shared/_Layout.cshtml", inject: false, metadata: {}, alwaysWriteToDisk: true }),
        new AureliaPlugin({ aureliaApp: "boot" }),
        new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
        new ModuleDependenciesPlugin({}),
        extractCSS
    ]

Очевидно, вам нужно сначала добавить его с помощью npm.