按官方文档安装Pixi.js V7后模块导入失败求助

出现Uncaught TypeError: Failed to resolve module specifier "pixi.js"错误的核心原因是：浏览器原生ES模块系统不支持直接引用npm包名（即"裸模块标识符"），它只能识别相对路径、绝对路径或CDN链接这类明确的资源地址。以下是两种可行的解决方式：

方案1：使用打包工具（推荐，匹配官方文档用法） #

Pixi.js官方文档的示例默认基于打包环境，这类工具会自动处理模块解析逻辑：

1. 初始化项目并安装依赖

npm init -y
npm install pixi.js
# 安装轻量打包工具Vite
npm install vite --save-dev

2. 在项目根目录添加vite.config.js（可选，用于自定义开发服务配置）：

export default {
  server: {
    port: 3000
  }
}

3. 修改package.json添加启动脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

4. 保持你的Application.js代码不变，启动开发服务器：

npm run dev

通过http://localhost:3000访问页面，模块解析即可正常工作。

方案2：不使用打包工具（直接在浏览器运行） #

若不想引入打包工具，需手动指定Pixi.js的完整资源路径，同时必须通过本地HTTP服务器访问（直接打开file://协议的HTML会触发CORS问题）：

1. 确保已执行npm install pixi.js完成依赖安装
2. 修改Application.js的导入语句，根据文件结构使用正确的相对路径：

// 示例：若Application.js在js/目录，需向上跳转一级访问node_modules
import * as PIXI from '../node_modules/pixi.js/dist/pixi.mjs';

3. 启动本地HTTP服务器（以serve为例）：

npx serve .

通过服务器提供的地址访问页面，即可正常运行代码。

关于你提到的精灵加载器问题：使用打包工具方案时无需额外处理；若用直接引用方式，需确保资源路径与Pixi的加载配置匹配，可通过PIXI.Loader.default.baseUrl设置资源基准路径。

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