使用 ExpressJS，我如何在客户端使用 NPM 包？答案

【问题标题】：With ExpressJS, how can I utilize an NPM package on the client-side?使用 ExpressJS，我如何在客户端使用 NPM 包？
【发布时间】：2021-08-08 22:02:54
【问题描述】：

我一直在探索利用 HTML 画布和 Socket.io 进行 JavaScript 游戏开发，我刚刚遇到了画布框架 PixiJS。

我决定尝试一下，所以我开始了一个新项目并 npm install-ed express、socket.io 和 pixi.js。我做了一个典型的 express 和 socketio 静态服务器，服务于 '/public'

'./index.js:'

const express = require('express')
const app = express()

const http = require('http')
const server = http.createServer(app)
const { Server } = require('socket.io')
const io = new Server(server)

app.use(express.static('public'))

io.on('connection', (socket) => {
  console.log(`Socket ${socket.id} connected!`)

  socket.once('disconnect', () => {
    console.log(`Socket ${socket.id} disconnect!`)
  })
})


server.listen(process.env.PORT || 3000, () => {
  console.log(`Listening on ${process.env.PORT || 3000}`)
})

但后来它击中了我，在客户端 JavaScript 上我无法访问 pixi.js 包。我什至不知道从哪里开始使用框架客户端。以下是它的工作原理：

'./public/js/main.js'

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

但显然我得到“无法解析模块说明符......”，因为它是一个服务器端包。

我是 HTTP 服务器和全栈开发的超级新手，如何在快速服务的客户端目录中使用 NPM 包？如果这是一个重复的问题，我深表歉意。

【问题讨论】：

标签： node.js express pixi.js

【解决方案1】：

您必须使用捆绑器，例如 Webpack、Parcel、Rollup、...

这些基本上编译您的代码和依赖项（通常为旧版本的 JS 以兼容浏览器）并将它们捆绑在一起，为您（默认情况下）提供一个包含您（使用的）依赖项的 .js 文件。这适用于大多数模块。

GitHub for pixi.js 还指定了您可以使用的 CDN 安装。如果这是您关心的唯一依赖项，那将是一种更简单的方法。

【讨论】：