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



我已经从其他人手中接管了Vue.js项目,并且在捆绑的javascript代码中遇到了一些跨浏览器问题。我不是巴别塔的专家,怀疑可能有些配置不正确?

我可以在自己的开发机器上本地运行Vue.js网站,也可以将其发布为Azure web应用程序。测试网站给出以下结果:

  • Chrome:在本地和Azure中托管时运行良好
  • IE 11:在本地托管时运行良好,但在Azure中托管时失败
  • Safari:在Azure中托管时失败(尚未在本地尝试(

让我惊讶的是,当网站托管在本地时,IE 11运行良好,但当网站托管于Azure时失败。这是同一个捆绑的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跨浏览器工作?

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

观察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无关,而是由于一些自定义缩小代码中的错误。

最新更新