在 MediaWiki 中使用 let 而不是 var 中断 User:*/vector.js答案

【问题标题】：Using let instead of var breaks User:*/vector.js in MediaWiki在 MediaWiki 中使用 let 而不是 var 中断 User:*/vector.js
【发布时间】：2020-09-18 02:20:09
【问题描述】：

我试图了解我对 MediaWiki 用户脚本的basic example 的改编发生了什么。

它以原始形式工作，但是当我在 format_words 函数中将 var 替换为 let 时，它停止工作。我对 JavaScript 和 jQuery 很陌生。这是工作版本：

function format_words(title, numWords){
  var text = title+" ("+numWords+" words)";
  return text;
}

$(document).ready(function(){
  var numWords = $("#mw-content-text > div").text().split(" ").length;
  var header = $("#firstHeading").text();
  $("#firstHeading").text(format_words(header, numWords));
});

这里是不工作的版本

function format_words(title, numWords){
  let text = title+" ("+numWords+" words)";
  return text;
}

$(document).ready(function(){
  var numWords = $("#mw-content-text > div").text().split(" ").length;
  var header = $("#firstHeading").text();
  $("#firstHeading").text(format_words(header, numWords));
});

第一个给出了这个 h1 标题：

用户：Wolf/vector.js（74 字）

第二个给出

用户：Wolf/vector.js

我在 MediaWiki 1.31.6 和 MediaWiki 1.35.0-wmf.34 (6ff15fd) 中对此进行了测试，效果相同。

慢慢熟悉 jQuery 之后，我对异步的期望很高，但此时我无法弄清楚它的影响。

反例

当我在本地 HTML+JavaScript（使用热 jQuery）中测试类似代码时，从 var 切换到 let 不会破坏代码。

控制台日志

感谢charlietfl我将脚本更改为

function format_words(title, numWords){
  console.log("format_words [enter]");
  let text = title+" ("+numWords+" words)";
  console.log("format_words: text:"+text);
  return text;
}

$(document).ready(function(){
  console.log("on ready [enter]");
  var numWords = $("#mw-content-text > div").text().split(" ").length;
  var header = $("#firstHeading").text();
  $("#firstHeading").text(format_words(header, numWords));
  console.log("on ready [leave]");
});

... 并打开控制台。对于let 版本，它显示以下错误：

JavaScript parse error: Parse error: Missing ; before statement in file↵
 'User:Wolf/vector.js' on line 3 vector.js line 1 > scriptElement:1:8
    <anonym> https://some.wiki/w/User:Wolf/vector.js line 1 > scriptElement:1
    jQuery 9
        DOMEval
        globalEval
        runScript
        fire
        add
        always
        checkCssHandles
        execute
        implement
    <anonym> https://some.wiki/load.php?debug=false&lang=en&modules=user&↵
skin=vector&user=Wolf&version=0hjxbj8:1

我认为 let 不受 JavaScript 支持。很奇怪：我确定 JavaScript 来自浏览器？它适用于我的 Counter 示例。

这是怎么回事？

【问题讨论】：

老实说，在这种情况下将var 切换为let 或const 应该没有任何区别。你确定这是唯一的变化吗？
当然，我现在正在检查模拟案例两天，所以不仅要仔细检查。我使用了 revert 功能，当我查看差异时（保存前），我得到确认只有这一个词发生了变化。
你可以创建 fiddle 或 stackblitz 演示
如反例中所述，该问题在 MediaWiki 之外无法重现，所以我猜交付的 HTML 中的某些内容会使浏览器降级为一些古老的 JS。

标签： javascript jquery mediawiki

【解决方案1】：

MediaWiki 使用的JS minifier 不支持let 等ES6 语言功能。

您看到的控制台错误是（服务器端）压缩程序生成的错误，作为脚本传输。

【讨论】：

很高兴知道这个“幽灵”似乎有一个合理的解释！你能解释一下吗，给一个链接以加深我的知识？提前致谢。
我想知道为什么这个限制没有公开传达给任何认真的 MediaWiki UserScript 新手（我不是在谈论复制和粘贴专家）。在当前的 JavaScript 教程中，'let' 的优点被如此显着地传播，以至于我觉得如果你让人们先撞墙是相当无知的。我了解 ES6 支持对你们 MediaWiki 开发人员来说是一项正在进行的工作，但请告诉我有关当前限制的信息可以公开访问的地方。
顺便说一句：在保存 vector.js 之前的预览中，两个变体都按预期工作，这是另一个令人困惑的细节。
MediaWiki 有一个称为 ResourceLoader [1] 的部分（任何从 load.php 调用的东西）。 ResourceLoader 将检查您的代码是否正确，并将缩小您的代码。如果您正在编写 Less 样式，它也会编译这些样式。您的问题出现在检查正确性部分，因为 ResourceLoader 不知道最新的 JS 功能（又名没有 ES6，因此没有let）。然后它认为你的 JS 不正确，而不是提供所谓的损坏的 JS，而是提供一些脚本，将错误记录到控制台。 [1]：mediawiki.org/wiki/ResourceLoader
我没有进行文档搜索，这是我多年前了解的。 IIRC 预览工作的原因是它直接将 JS 注入页面而不通过 ResourceLoader 缓存原因。要找到确切的答案，我必须搜索文档，这是我的想法。

【解决方案2】：

虽然Tgr 可能（以某种方式）回答了我对问题的原始措辞

如何使用 let 而不是 var 破坏我的 MediaWiki 用户脚本？

...我必须以某种方式应对这个令人惊讶的限制。¹ 幸运的是，我找到了一个非常令人满意的解决方法：const 由 JS 支持缩小器尽管是an ES6 feature！

¹ 我仍然无法谷歌，但有希望：明天我会找到我自己问题的答案?

【讨论】：