无打包器本地安装PixiJS模块遇导出错误求助

1. 确认Express静态资源配置 #

确保已将node_modules目录设为静态资源目录，让客户端能访问本地安装的PixiJS文件：

// Express 配置代码
const express = require('express');
const app = express();

// 关键：将node_modules设为静态目录
app.use(express.static('node_modules'));

app.listen(3000, () => console.log('Server running on port 3000'));

2. 修正HTML的Import Map #

PixiJS默认入口是CommonJS格式，需指定ES模块版本的路径，修改你的importmap：

<script type="importmap">
{
  "imports": {
    "pixi.js": "/pixi.js/dist/pixi.es.js"
  }
}
</script>
<script type="module" src="./client.js"></script>

3. 调整客户端导入方式 #

PixiJS的ES模块将整个库作为默认导出，而非顶层命名导出，修改client.js的导入逻辑：

// client.js
import PIXI from 'pixi.js';

// 创建Application实例
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

差异说明 #

Three.js的ES模块支持顶层命名导出（比如import { Scene, WebGLRenderer } from 'three'），但PixiJS的ES模块把所有API挂载在默认导出的PIXI对象上，这是两者打包结构的差异导致的。

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