使用ExpressJS时如何将已安装的NPM包应用到客户端侧代码？

浏览器原生ES模块导入不支持直接写裸模块名（也就是不带路径的import * as PIXI from 'pixi.js'这种写法），必须传入服务器可访问的绝对/相对路径。你通过npm安装的pixi.js存放在项目的node_modules目录下，而你当前只托管了public目录，node_modules里的资源客户端无法访问，因此会报模块解析失败的错误。

下面是几种常用的实现方式，你可以根据项目复杂度选择：

方案1：直接托管node_modules中的pixi.js资源（适合测试/小项目） #

这种方式不需要额外工具，修改几行配置就能用：

• 第一步：修改服务端index.js，增加一行静态目录托管配置，把pixi.js的构建产物暴露给客户端：

// 放在现有app.use(express.static('public'))之后即可
app.use('/pixi', express.static('node_modules/pixi.js/dist'))

• 第二步：修改客户端/public/js/main.js的导入路径，改为你暴露的服务端路径：

import * as PIXI from '/pixi/pixi.min.mjs'
const app = new PIXI.Application()
document.body.appendChild(app.view)

• 第三步：确保你引入main.js的HTML script标签加了type="module"属性：

<script type="module" src="/js/main.js"></script>

方案2：用前端构建工具处理（适合正式维护的项目） #

如果项目后续会迭代更多功能，更推荐用Vite、Webpack这类前端构建工具处理前端资源：

• 你可以把前端代码单独放在一个目录，用构建工具安装并打包pixi.js等前端依赖，构建工具会自动处理模块路径，你可以直接用import * as PIXI from 'pixi.js'的写法
• 生产环境把构建打包后的产物全部放到express的public目录托管即可，不需要额外修改服务端配置。

方案3：直接引入全局版本（无需处理模块导入） #

你也可以直接在HTML中引入pixi.js的预构建全局文件，不需要用到import语法：

• 从node_modules/pixi.js/dist里把pixi.min.js复制到public的js目录下，在HTML引入：

<script src="/js/pixi.min.js"></script>

• 引入后全局会自动挂载PIXI对象，直接在main.js里使用即可，不需要任何导入语句。

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