基于Webpack和TypeScript的MediaWiki扩展无法加载mw（mw.util）

• 非前端开发者，首次使用npm、webpack、TypeScript，代码已成功构建，但在MediaWiki中使用时出现以下报错：

  app.ts:378 Uncaught ReferenceError: mw is not defined
  app.ts:391 Uncaught TypeError: Cannot read properties of undefined (reading 'query')

• 迁移到TypeScript前代码可正常运行。

• 确保代码在mw加载后执行
  MediaWiki的mw是全局对象，但webpack打包后的脚本可能在mw加载完成前就运行了。可以把初始化代码包裹在页面加载完成的事件里：

  document.addEventListener('DOMContentLoaded', () => {
    new MyClass();
  });
  

  另外要确认你的扩展是通过MediaWiki的ResourceLoader机制引入脚本，而不是直接硬编码引入，这样能保证mw等核心依赖先加载。

• 配置webpack排除mw依赖
  webpack默认会打包所有依赖，但mw是MediaWiki提供的全局对象，不需要打包。在webpack.config.js里添加externals配置：

  module.exports = {
    // 其他配置项...
    externals: {
      'mw': 'mw' // 告诉webpack mw是全局变量，不用打包进输出文件
    }
  };
  

  同时在TypeScript代码里添加声明避免编译报错，直接在app.ts顶部加一行：

  declare const mw: any;
  

• 检查mw相关API的调用
  第二个报错是第一个错误的连锁反应，修复mw未定义的问题后会自动解决。另外确认你是按MediaWiki的规范用mw.Api发起请求，比如：

  const api = new mw.Api();
  api.get({
    action: 'query',
    // 你的请求参数
  }).done(data => {
    // 处理返回数据
  });
  

• 对比迁移前的加载逻辑
  既然TS迁移前正常，对照原来的JS代码：

  • 原来的脚本是不是通过MediaWiki的资源加载器注册的？迁移后要保持相同的注册方式，确保依赖关系正确。
  • 原来的代码是不是直接依赖全局mw？通过webpack的externals配置就能恢复这种全局依赖的方式。

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