如何用包裹加载多张图片？

Question

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);
});

Answer 1

You can get this working by using Parcel's glob specifiers feature. Here's what you need to do:

1. Add @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", "..."] }

   If you restart parcel, it should automatically install the @parcel/resolver-glob package into your project, but in case that fails, you can always add it manually with yarn add / npm install /etc.
2. Import references to the files in your folder using this syntax:

    import * as logos from "./colors/*.png";

   If the 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" }

3. Iterate over the values of the logos object, and do whatever you want with the image URLs, eg:

    Object.values(logos).forEach((logoUrl) => { const sprite = new Sprite.from(logoUrl); //... });