如何在原生JS项目中以模块方式导入pixi.js并解决构造函数错误

文件结构 #

• index.html
• main.js
• pixi.js

index.html 代码 #

<!doctype html>
<html>
  <head>
    <style>
        body{
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <script src="main.js" type="module" defer></script>
  </head>
  <body>
    
  </body>
</html>

main.js 代码 #

import * as PIXI from './pixi.js';
const app = new PIXI.Application({ 
    resizeTo:window,
    antialias: true,
    autoDensity: true,
    resolution: 2 });
document.body.appendChild(app.view);

报错信息 #

报错信息：Uncaught TypeError: PIXI.Application is not a constructor

已尝试方案及疑问 #

• 在index.html中通过<script src="pixi.js" type="module"></script>标签导入，同时移除main.js中的import语句，此方法可正常运行，但无法让JSDoc及代码检查工具识别PIXI为有效类型。
• 使用JS打包工具，通过import * as PIXI from 'pixi.js'导入，但该方法需要依赖打包工具。

请问能否不借助额外工具，仅通过原生方式完成导入？

问题根源是你当前使用的pixi.js是UMD/IIFE格式的文件（这类文件会直接在全局注入PIXI对象，而非标准ES模块导出），所以import * as PIXI无法正确获取到构造函数。以下两种原生方式可解决：

方法1：用包装文件导出全局PIXI #

新增一个pixi-wrapper.js文件，内容如下：

import './pixi.js';
export default PIXI;

然后修改main.js的导入语句：

import PIXI from './pixi-wrapper.js';
const app = new PIXI.Application({ 
    resizeTo:window,
    antialias: true,
    autoDensity: true,
    resolution: 2 });
document.body.appendChild(app.view);

此方法仅用原生模块语法实现导入，同时代码检查工具能识别到PIXI的类型，不需要引入打包工具。

方法2：使用PIXI的ES模块版本 #

直接下载PIXI官方提供的ES模块格式文件（可从PIXI官网下载页选择ES模块版本，或从npm包的dist/esm目录中提取），将其命名为pixi.esm.js后，修改main.js的导入语句：

import * as PIXI from './pixi.esm.js';

这类文件本身就是标准ES模块，直接导入即可正常使用，同时代码工具能自动识别类型，无需额外处理。

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