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 quantifier

Safari 错误消息是：

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：&nbsp;IE 工作的原因，当网站在本地托管时，但当网站在 Azure 中托管时不工作，是因为方法代码内部正在GetPathWithCacheBust检查网站是否在本地托管 - 并且如果是，则直接加载 javascript 文件而不进行任何缩小。观察 2：&nbsp;如问题中所述，我已经从其他人那里接管了代码库。经过更深入的检查后，我发现，使用 .ashx 文件在 web.config 文件中应用了自定义缩小逻辑。这种自定义缩小逻辑似乎破坏了特殊字符，从而导致 moment.js 中的 javascript 错误。我删除了自定义缩小逻辑并使用 Microsoft.AspNet.Web.Optimization NuGet 包应用了默认捆绑/缩小。起初，这没有按预期工作（出现 404 错误，因为找不到缩小的包）。但我发现，这是由于与网站使用的 Umbraco 发生冲突。将此行添加到 web.config 后，一切终于正常了：<add&nbsp;key="umbracoReservedUrls"&nbsp;value="~/bundles/"&nbsp;/>所以最后，这个问题根本与 Babel 或 Moment.js 无关——而是由于某些自定义缩小代码中的错误。