在 aurelia 中将 event-source-polyfill 添加到 webpack答案

【问题标题】：Adding event-source-polyfill to webpack in aurelia在 aurelia 中将 event-source-polyfill 添加到 webpack
【发布时间】：2018-09-01 15:17:13
【问题描述】：

我的应用程序使用 aurelia 和 webpack 构建在 asp.net core 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

我跑了npm install event-source-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'
       }),

在plugins 的webpack.config.js 内然后我导入了import 'event-source-polyfill/src/eventsource.min.js'。我的 event-source-polyfill 位于 node-modules 文件夹中。我应该在某处手动复制它吗？那么我该如何实际使用它呢？我不知道在 aurelia 中该怎么做才能告诉它为 IE 使用这个 polyfill。到目前为止，错误仍然相同。

【问题讨论】：

我投票结束这个问题，因为这不是一个问题。这是一个功能请求。请将其作为问题提出@@github.com/aurelia/clirepo 公平地说，您的问题是关于使用 IE 进行开发，而不是在 IE 中运行应用程序。这就是折磨（-：
@AlexanderTaran 这是否意味着不可能？你能建议一个替代方案吗？在我意识到它在 IE 中不起作用之前，我已经完成了应用程序的制作:(
@AlexanderTaran 我应该澄清一下，我可以使用其他浏览器进行开发，但我需要它在 IE 中运行。我在运行应用程序时遇到的问题是，当我更新某些内容时，它不会在大量页面重新加载或重新启动应用程序之前在视图上更新。更大的问题是 IE 抛出“localhost is not loading due to a long running script”并挂起。我在控制台中遇到的错误是“如果你想支持这个浏览器，你应该包含一个 polyfill”，因此我认为这些是相关的。我应该发布一个新问题吗？
正如您自己所指出的 - webpack 中的 HMR 需要 polyfil。你不用 webpack 在生产环境中运行。正确的？你不应该。尝试 build for prod 看看效果如何。

标签： internet-explorer webpack aurelia polyfills webpack-hot-middleware

【解决方案1】：

在我回答你的问题之前，让我说 Alex Taran 是对的，即使你添加了事件源 polyfill，HMR 也无法与 IE 一起使用，并且没有人能够使其与 IE 一起使用感兴趣这样做。

然而，实际的问题是如何通过 webpack 添加事件源 polyfill，而这确实可以做到。方法如下。

在您的webpack.config.js 文件底部附近，您会找到插件部分。您需要添加或修改webpack.ProvidePlugin，如图所示。在这个 sn-p 中它添加了 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 添加它。

【讨论】：