使用ExpressJS，我如何在客户端使用NPM包?

Question

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

我决定尝试一下，所以我启动了一个新项目，npm安装了express, socket。IO和pixi.js。我做了一个典型的express和socket静态服务器，服务'/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包。我甚至不知道从哪里开始利用客户端框架。下面是它的工作原理:

’。/公共/js/main.js">

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

但显然我得到'未能解析模块说明符....'因为它是一个服务器端包。

我对HTTP服务器和全栈开发非常陌生，我如何在快速服务的客户端目录上使用NPM包?如果这是一个重复的问题，我道歉。

Answer 1

你必须使用像Webpack, Parcel, Rollup，…这样的打包器

这些基本上编译你的代码和依赖(通常是一个旧版本的JS浏览器兼容性)，并捆绑在一起，给你(默认情况下)一个单一的.js文件，包括你的(使用)依赖。这适用于大多数模块。

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