Tengo una aplicación pixi.js que depende de varias imágenes que están dentro de una carpeta y quiero usar el empaquetador de paquetes. Puedo importarlos uno por uno ( import logo from "./color/btc.png" funciona como se esperaba) pero cuando traté de importar la carpeta, el paquete da este error.
/Users/user1/Desktop/pixi001/src/app.js:2:20 1 | import { Application, Container, Sprite } from "pixi.js"; > 2 | import logos from "./color/*.png"; > | ^^^^^^^^^^^^^^^ 3 | const app = new Application({ 4 | width: window.innerWidth, @parcel/resolver-default: Cannot load file './color/*.png' in './src'. 💡 Did you mean './color/d.png'? 💡 Did you mean './color/r.png'?¿Hay alguna forma de lograr esto con el empaquetador de paquetes?
Este es el resto del código.
import { Application, Container, Sprite } from "pixi.js"; import logos from "./color/*.png"; const app = new Application({ width: window.innerWidth, height: window.innerHeight, resizeTo: window, backgroundColor: 0xffffff, resolution: 1, backgroundAlpha: 0 }); document.body.appendChild(app.view); const container = new Container(); app.stage.addChild(container); logos.forEach(logo => { const sprite = new Sprite.from(logo); sprite.x = Math.random() * innerWidth; sprite.y = Math.random() * innerHeight; container.addChild(sprite); });Puede hacer que esto funcione utilizando la función de especificadores globales de Parcel. Esto es lo que debe hacer:
@parcel/resolver-glob a la canalización de "resolvers" de su archivo .parcelrc . Si aún no tiene un archivo .parcelrc , cree uno en la raíz de su proyecto que se vea así: { "extends": "@parcel/config-default", "resolvers": ["@parcel/resolver-glob", "..."] } Si reinicia el paquete, debería instalar automáticamente el @parcel/resolver-glob en su proyecto, pero en caso de que falle, siempre puede agregarlo manualmente con yarn add / npm install /etc. import * as logos from "./colors/*.png"; Si la carpeta de colors contiene dos archivos a.png y b.png , entonces la variable logos en tiempo de ejecución será un objeto que se verá así: { a: "string url to a.png", b: "string url to b.png" }logos y haga lo que quiera con las URL de las imágenes, por ejemplo: Object.values(logos).forEach((logoUrl) => { const sprite = new Sprite.from(logoUrl); // ... });