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

错误的代码行是这样的：

,"./node_modules/moment/locale/ar-dz.js":function(n,t,i){
//! moment.js locale configuration
//! locale : Arabic (Algeria) [ar-dz]
//! author : Amine Roukh: https://github.com/Amine27
//! author : Abdel Said: https://github.com/abdelsaid
//! author : Ahmed Elkhatib
//! author : forabi https://github.com/forabi
//! author : Noureddine LOUAHEDJ : https://github.com/noureddinem
(function(n,t){t(i("./node_modules/moment/moment.js"))})(this,function(n){"use strict";
//! moment.js locale configuration
var i=function(n){return n===0?0:n===1?1:n===2?2:n%100>=3&&n%100<=10?3:n%100>=11?4:5},u={s:["??? ?? ?????","????? ?????",["???????","???????"],"%d ????","%d ?????","%d ?????",],m:["??? ?? ?????","????? ?????",["???????","???????"],"%d ?????","%d ?????","%d ?????",],h:["??? ?? ????","???? ?????",["??????","??????"],"%d ?????","%d ????","%d ????",],d:["??? ?? ???","??? ????",["?????","?????"],"%d ????","%d ?????","%d ???",],M:["??? ?? ???","??? ????",["?????","?????"],"%d ????","%d ????","%d ???",],y:["??? ?? ???","??? ????",["?????","?????"],"%d ?????","%d ?????","%d ???",]},t=function(n){return function(t,r){var e=i(t),f=u[n][i(t)];return e===2&&(f=f[r?0:1]),f.replace(/%d/i,t)}},r=["?????","?????","????","?????","???","????","??????","???","??????","??????","??????","??????",];return n.defineLocale("ar-dz",{months:r,monthsShort:r,weekdays:"?????_???????_????????_????????_??????_??????_?????".split("_"),weekdaysShort:"???_?????_??????_??????_????_????_???".split("_"),weekdaysMin:"?_?_?_?_?_?_?".split("_"),weekdaysParseExact:!0,longDateFormat:{LT:"HH:mm",LTS:"HH:mm:ss",L:"D/?M/?YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},meridiemParse:/?|?/,isPM:function(n){return"?"===n},meridiem:function(n){return n<12?"?":"?"},calendar:{sameDay:"[????? ??? ??????] LT",nextDay:"[???? ??? ??????] LT",nextWeek:"dddd [??? ??????] LT",lastDay:"[??? ??? ??????] LT",lastWeek:"dddd [??? ??????] LT",sameElse:"L"},relativeTime:{future:"??? %s",past:"??? %s",s:t("s"),ss:t("s"),m:t("m"),mm:t("m"),h:t("h"),hh:t("h"),d:t("d"),dd:t("d"),M:t("M"),MM:t("M"),y:t("y"),yy:t("y")},postformat:function(n){return n.replace(/,/g,"?")},week:{dow:0,doy:4}})})},

...我相信我已经将问题缩小为这个正则表达式：

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 包应用了默认值 bundling/minification。

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

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

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

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

Babel / Moment.js / Bundled javascript fails in IE/Safari

javascript

internet-explorer

momentjs

babeljs