Как с помощью ExpressJS я могу использовать пакет NPM на стороне клиента?

avatar
Zach Shattuck
8 августа 2021 в 22:02
160
1
1

Я изучал разработку игр на JavaScript с использованием холста HTML и Socket.io и только что наткнулся на каркас холста PixiJS.

Я решил попробовать, поэтому я начал новый проект и npm установил экспресс, socket.io и pixi.js. Я сделал типичный экспресс и статический сервер 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 в клиентском каталоге с экспресс-обслуживанием? Прошу прощения, если это повторяющийся вопрос.

Источник

Ответы (1)

avatar
Kelvin Schoofs
8 августа 2021 в 22:07
1

Вы должны будете использовать сборщик, такой как Webpack, Parcel, Rollup<62650063065321>,3351>

Они в основном компилируют ваш код и зависимости (обычно в более старую версию JS для совместимости с браузером) и связывают их вместе, предоставляя вам (по умолчанию) один файл .js, который включает ваши (используемые) зависимости. Это работает для большинства модулей.

На GitHub для pixi.js также указана установка CDN, которую можно использовать вместо этого. Если это единственная зависимость, которая вас волнует, это будет более простой подход.