Блог

Текущая ситуация выглядит следующим образом:

 // ./img/index.js:

import some-image from "./some-image.png";
import some-other-image from "./some-other-image.png";
// About 50 of these imports

export const imageArray = [some-image, some-other-image] //...and the other 48 imported images go in this array  

Оказывается, что при полном вводе это довольно длинное заявление об экспорте. Чего я хочу добиться, так это заполнить export imageArray всем импортированным изображением более автоматизированным способом без необходимости копировать вставлять имена переменных из import.

Что-то вроде:

 export const imageArray = [this.Imports];
  

Возможно ли что-то подобное?

Вы можете сделать это с помощью babel-plugin-wildcard.

 import * as images from "./images/*.png"

export default images
// or
export const imageArray = images
  

Если вы хотите сделать это без какого-либо третьего модуля:

 const fs = require('fs');
const path = require('path');

// In this example i supose you have only images at the folder!
async function getImages(folder) {
  const images = [];

  const files = await fs.promises.readdir(folder, { withFileTypes: true });
  for (let file of files) {
    images.push(path.join(__dirname, folder, file));
  }

  return images;
}

const imageArray = [];

// The '.' should be the path where are your images at.
const array = getImages('.'); 

// It could be like this or doing the reverse call when importing this imageArray...
array.forEach(el => {
  import image from el;
  imageArray.push(image)
});

export imageArray;