在Aurelia中將event-source-polyfill添加到Webpack

Question

我將應用程序構建在帶有aurelia和webpack的asp.net核心spa中（基於Rob Eisenberg的教程）。 它可以完美地在chrome和firefox上運行，但是在IE（我需要支持的主要瀏覽器）中，存在模塊熱加載的問題。 我收到此錯誤： webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser 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 polyfill在package.json devdependencies中，我添加了：

    "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'
       }),

在webpack.config.js plugins內部，然后導入webpack.config.js import 'event-source-polyfill/src/eventsource.min.js' 。 我的event-source-polyfill位於node-modules文件夾中。 我應該手動將其復制到某個地方嗎？ 那我該如何使用呢？ 我不知道該怎么做才能告訴它在IE中使用這種polyfill。 到目前為止，錯誤仍然相同。

Answer 1

在我回答您的問題之前，我想說Alex Taran是正確的，即使您添加了事件源polyfill，HMR也無法與IE一起使用，而且沒有人能夠與IE配合使用。

盡管如此，實際的問題是如何通過webpack添加事件源polyfill ，這確實可以做到。 這是如何做。

在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中添加它。