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

Question

我一直在探索 JavaScript 使用 HTML canvas 和 Socket.io 的游戏开发，我刚刚遇到了 canvas 框架 PixiJS。

我决定尝试一下，所以我开始了一个新项目并安装了 npm 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)

但显然我得到 'Failed to resolve module specifier....' 因为它是一个服务器端包。

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

Answer 1

您必须使用 Webpack, Parcel, Rollup、...

等捆绑器

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

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

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

With ExpressJS, how can I utilize an NPM package on the client-side?

node.js

express

pixi.js