浏览器打开pixi.js应用报错：无法解析模块标识符‘pixi.js’

浏览器原生ES模块不支持直接解析"pixi.js"这种裸模块标识符，它要求模块引用必须是相对路径（.//../）、绝对路径或者完整的URL。你通过npm安装的包存在node_modules里，但浏览器不知道该去哪里查找这个裸模块，所以抛出了这个错误。

这里提供三种可行的方案，按需选择：

方案1：直接引用node_modules中的模块文件 #

修改app.js里的导入语句，使用相对路径指向node_modules中pixi.js的ES模块文件：

import { Application, Sprite, Assets } from "./node_modules/pixi.js/dist/pixi.mjs";
const app = new Application();
await app.init();

这种方法无需额外工具，但如果后续依赖有嵌套导入，可能会出现同样的路径问题，不够灵活。

方案2：使用打包工具（推荐） #

打包工具（如Vite、Webpack）会处理模块解析逻辑，将所有依赖打包成浏览器能识别的文件，是生产环境的标准做法：

1. 确保项目已初始化（若未初始化，执行npm init -y）
2. 安装Vite作为开发依赖：

   npm install vite --save-dev
   

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

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

4. 运行npm run dev启动开发服务器，替代原来的Live Server，此时你的原始导入语句import { Application, Sprite, Assets } from "pixi.js"就能正常工作了。

方案3：使用CDN导入 #

如果不想本地安装或使用打包工具，可以直接通过CDN引入pixi.js的ES模块版本：
修改app.js的导入语句为CDN地址：

import { Application, Sprite, Assets } from "https://cdn.skypack.dev/pixi.js";
const app = new Application();
await app.init();

或者在index.html中先全局导入，再在app.js中使用：

<!DOCTYPE html>
<html>
<head>
  <title>pixi.js.</title>
  <script type="module">
    import * as PIXI from 'https://cdn.skypack.dev/pixi.js';
    window.PIXI = PIXI;
  </script>
</head>
<body>
  <script type='module' src="app.js"></script>
</body>
</html>

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