I have a pixi.js app that depends on multiple images which are inside a folder and i want to use parcel bundler. I can import them one by one (import logo from "./color/btc.png" works as expected) but when i tried to import folder, parcel give this 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'?
Is there anyway to achieve this with parcel bundler?
This is the rest of the code.
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);
});
You can get this working by using Parcel's glob specifiers feature. Here's what you need to do:
@parcel/resolver-glob to the "resolvers" pipeline of your .parcelrc file. If you don't have a .parcelrc file yet, create one at the root of your project that looks like this:
{
"extends": "@parcel/config-default",
"resolvers": ["@parcel/resolver-glob", "..."]
}
@parcel/resolver-glob package into your project, but in case that fails, you can always add it manually with yarn add/npm install/etc.import * as logos from "./colors/*.png";
colors folder contains two files a.png and b.png, then the logos variable at runtime will be an object that looks like this:
{
a: "string url to a.png",
b: "string url to b.png"
}
logos object, and do whatever you want with the image URLs, e.g.:
Object.values(logos).forEach((logoUrl) => {
const sprite = new Sprite.from(logoUrl);
// ...
});