Babel / Moment.js / 捆绑的 javascript 在 IE/Safari 中失败

Question

我从其他人那里接管了一个 Vue.js 项目，并且遇到了一些与捆绑的 javascript 代码有关的跨浏览器问题。我不是 Babel 的专家，怀疑可能是某些配置不正确？我可以在自己的开发机器上本地运行 Vue.js 网站，并且可以将其发布为 Azure 网络应用程序。测试网站给出以下结果：Chrome：在本地和 Azure 中托管时运行良好。IE 11：在本地托管时运行良好，但在 Azure 中托管时失败。Safari：在 Azure 中托管时失败（未在本地尝试过）令我感到惊讶的是，当网站托管在本地时，IE 11 工作正常，但当网站托管在 Azure 中时，IE 11 运行失败。这是同一个捆绑的 js 文件。当网站托管在 Azure 中时，IE 和 Safari 都在捆绑的 js 文件中的同一行失败。IE错误信息是：SCRIPT5018: Unexpected quantifierSafari 错误消息是：SyntaxError: Invalid regular expression: nothing to repeat..而且我相信我已经将问题缩小为这个正则表达式：meridiemParse:/?|?/...确实看起来不正确。但是为什么脚本在某些情况下会成功，特别是当网站在本地托管时，为什么 IE 可以正常工作？无效的正则表达式似乎来自 moment.js 库，但也许是在从 babel 进行了一些不正确的转换之后？这是我的 Babel 设置：{    "plugins": [        "@babel/syntax-dynamic-import",        "@babel/plugin-proposal-class-properties",        ["babel-plugin-root-import",            {                "paths": [                    {                        "rootPathSuffix": "./scripts",                        "rootPathPrefix": "~/"                    }                ]            }        ]    ],  "presets": [        [            "@babel/preset-env",            {                "useBuiltIns": "usage",                "corejs": "3.7",                "modules": false            }        ]  ]}任何建议，如何解决这个问题并使捆绑的 js 跨浏览器工作？

Answer 1

好的，我现在已经解决了这个问题。

观察 1： IE 工作的原因，当网站在本地托管时，但当网站在 Azure 中托管时不工作，是因为方法代码内部正在GetPathWithCacheBust检查网站是否在本地托管 - 并且如果是，则直接加载 javascript 文件而不进行任何缩小。

观察 2： 如问题中所述，我已经从其他人那里接管了代码库。经过更深入的检查后，我发现，使用 .ashx 文件在 web.config 文件中应用了自定义缩小逻辑。这种自定义缩小逻辑似乎破坏了特殊字符，从而导致 moment.js 中的 javascript 错误。

我删除了自定义缩小逻辑并使用 Microsoft.AspNet.Web.Optimization NuGet 包应用了默认捆绑/缩小。

起初，这没有按预期工作（出现 404 错误，因为找不到缩小的包）。但我发现，这是由于与网站使用的 Umbraco 发生冲突。将此行添加到 web.config 后，一切终于正常了：

<add key="umbracoReservedUrls" value="~/bundles/" />

所以最后，这个问题根本与 Babel 或 Moment.js 无关——而是由于某些自定义缩小代码中的错误。