浏览器中使用Pixi.js遇import语句错误，求排查方案

核心问题 #

浏览器原生ES模块不支持直接导入npm包名（比如import * as PIXI from 'pixi'），它只能解析具体文件路径或CDN模块地址，无法像Node.js那样自动查找node_modules里的包。

解决方案 #

方案1：使用CDN导入模块 #

直接在script.js中导入CDN提供的Pixi.js ES模块地址：

import * as PIXI from 'https://cdn.skypack.dev/pixi.js@7.1.0'

或者在index.html中通过全局脚本引入，无需使用import：

<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.1.0/dist/pixi.min.js"></script>
<!-- 之后直接在script.js中使用全局的PIXI对象即可 -->

方案2：用打包工具处理模块（推荐生产环境） #

如果依赖npm包管理，需要用Vite、Webpack这类工具打包代码，让它们处理模块解析：

1. 安装打包工具（以Vite为例）：

npm install vite --save-dev

2. 在package.json中添加启动脚本：

{
  "scripts": {
    "dev": "vite"
  }
}

3. 修改script.js中的导入语句为正确的包名（注意是pixi.js而非pixi）：

import * as PIXI from 'pixi.js'

4. 运行npm run dev，通过Vite提供的开发服务器（通常是http://localhost:5173）访问页面，此时导入即可正常工作。

方案3：直接引用node_modules中的文件 #

可以手动指定node_modules里的Pixi.js模块路径：

import * as PIXI from './node_modules/pixi.js/dist/pixi.esm.js'

注意：这种方式仅适合本地调试，生产环境不推荐，因为路径可能随包版本变动。

额外检查点 #

• 确认index.html中的script标签type="module"拼写正确，没有遗漏。
• 避免用file://协议直接打开本地文件，必须通过HTTP服务器（比如Vite的开发服务器、Live Server插件）访问，否则会触发跨域限制导致模块加载失败。
• 确认导入语句的包名是pixi.js，npm包的正式名称是pixi.js，而非pixi。

内容的提问来源于stack exchange，提问作者Володимир К