如何让MediaWiki扩展加载mediawiki.js与mediawiki.base.js？

我正在维护一个已废弃的MediaWiki扩展，已在GitHub分叉该项目，尝试让MediaWiki加载定义mw.util的基础JavaScript，但出现了错误。

PHP代码 #

$wgOut->addModules(['mediawiki', 'mediawiki.base', 'mw.util']);
//$wgOut->addScriptFile("{$wgScriptPath}/resources/src/mediawiki.base/mediawiki.base.js");
$wgOut->addScriptFile("{$wgScriptPath}/extensions/SemanticMediaWikiGraph/includes/js/d3_v4.min.js");
$wgOut->addScriptFile("{$wgScriptPath}/extensions/SemanticMediaWikiGraph/includes/js/utility.js");
$wgOut->addScriptFile("{$wgScriptPath}/extensions/SemanticMediaWikiGraph/includes/js/app.js");

JS错误信息 #

jquery-3.6.3.js:4114 jQuery.Deferred exception: mw is not defined ReferenceError: mw is not defined
    at HTMLDocument.<anonymous> (https://www.tematichedigenere.com/extensions/SemanticMediaWikiGraph/includes/js/utility.js:3:5)
    at mightThrow (https://code.jquery.com/jquery-3.6.3.js:3830:29)
    at process (https://code.jquery.com/jquery-3.6.3.js:3898:12) undefined

问题原因 #

使用addScriptFile直接加载自定义JS文件时，这些文件会优先于MediaWiki核心模块（包括定义mw对象的mediawiki.base）执行，导致代码调用mw.util时mw对象还未完成初始化。

解决方案 #

方法1：注册MediaWiki资源模块（推荐） #

MediaWiki的资源模块系统会自动处理依赖加载顺序，需在扩展的extension.json中注册自定义脚本为资源模块并声明依赖：

"ResourceModules": {
    "ext.semanticMediaWikiGraph.d3": {
        "scripts": ["includes/js/d3_v4.min.js"],
        "localBasePath": "",
        "remoteExtPath": "SemanticMediaWikiGraph"
    },
    "ext.semanticMediaWikiGraph.utility": {
        "scripts": ["includes/js/utility.js"],
        "dependencies": ["mediawiki", "mediawiki.base", "mw.util"],
        "localBasePath": "",
        "remoteExtPath": "SemanticMediaWikiGraph"
    },
    "ext.semanticMediaWikiGraph.app": {
        "scripts": ["includes/js/app.js"],
        "dependencies": ["ext.semanticMediaWikiGraph.utility", "ext.semanticMediaWikiGraph.d3"],
        "localBasePath": "",
        "remoteExtPath": "SemanticMediaWikiGraph"
    }
}

随后修改PHP代码，替换addScriptFile为addModules：

$wgOut->addModules([
    'ext.semanticMediaWikiGraph.d3',
    'ext.semanticMediaWikiGraph.utility',
    'ext.semanticMediaWikiGraph.app'
]);

方法2：在JS中等待依赖加载 #

若暂时不想修改资源模块配置，可在utility.js开头用mw.loader.using确保依赖加载完成后再执行代码：

mw.loader.using(['mediawiki.base', 'mw.util']).then(function() {
    // 将原来utility.js中的所有代码放置在此回调函数内
    $(document).ready(function() {
        // 业务逻辑代码
    });
});

内容的提问来源于stack exchange，提问作者Revious