在Webpack中整合TypeScript与MatterJS的问题咨询

我之前在TypeScript项目里整合MatterJS的时候也碰到过一模一样的报错，给你几个亲测有效的解决办法：

方法一：使用命名导入替代默认导入 #

@types/matter-js的类型定义并没有提供默认导出，所以直接用import Matter from "matter-js"会触发类型错误。改用命名导入就能解决：

import * as Matter from "matter-js";

之后你就可以正常调用Matter.Engine.create()、Matter.Body.add()这类API了。

方法二：调整TypeScript配置支持默认导入 #

如果你习惯用默认导入的语法，可以修改tsconfig.json里的配置，让TypeScript允许合成默认导入：

{
  "compilerOptions": {
    "moduleResolution": "node", // Webpack 5+也可以用"bundler"
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true // 配合上面的配置一起用，兼容性更好
    // 其他你的项目配置...
  }
}

设置完成后，原来的import Matter from "matter-js"就能正常通过类型检查，Webpack打包也不会有问题。

方法三：按需导入具体模块（优化打包体积） #

如果你的项目只用到MatterJS的部分功能，也可以直接导入需要的模块，这样能减少最终打包后的代码体积：

import { Engine, World, Bodies, Render } from "matter-js";

比如创建引擎的时候就直接用Engine.create()，不用再通过Matter对象调用。

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