如何在模块化项目中正确使用matter.js 解决导入报错问题

报错原因 #

直接导入的是matter.js的UMD通用版本，该版本默认会尝试将Matter对象挂载到全局window对象，而webpack等模块化构建工具处理UMD格式文件时，没有正确接收导出就会触发上下文undefined的报错。

推荐引入方式（npm包管理） #

这是模块化项目最稳定的接入方式：

• 第一步：安装依赖
  执行命令：
  npm install matter-js
• 第二步：导入使用
  可以全量导入整个Matter对象：
  import Matter from 'matter-js'
  也可以按需导入需要的模块，减小打包体积：
  import { Engine, Render, Bodies, World } from 'matter-js'
• 最小可用示例：

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

// 创建物理引擎
const engine = Engine.create()
// 创建渲染器
const render = Render.create({
  element: document.body,
  engine: engine
})
// 创建80*80的矩形物体
const box = Bodies.rectangle(400, 200, 80, 80)
// 把物体添加到物理世界
World.add(engine.world, box)
// 运行引擎和渲染器
Engine.run(engine)
Render.run(render)

本地文件引入方案（无需npm安装） #

如果需要使用本地下载的matter.js文件，可使用以下两种方案处理：

• 方案1：全局引入
  将matter.js放到项目的public静态资源目录，在入口html文件中添加script标签引入：
  <script src="/matter.js"></script>
  引入后Matter会自动挂载到全局window对象，项目中直接使用window.Matter即可，无需额外import语句。
• 方案2：模块化导入本地文件
  优先下载matter.js的ESM版本文件，导入语句改为：
  import * as Matter from './matter.js'
  如果使用的是UMD版本仍然报错，可以在导入前手动补全全局上下文：

window.Matter = window.Matter || {}
import './matter.js'
const Matter = window.Matter

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