ওয়েবপ্যাক ব্যবহার করে কোনও ডিরেক্টরি থেকে গতিশীল চিত্রগুলি আমদানি করুন

Question 1

ES6 এর মাধ্যমে ওয়েবপ্যাকে চিত্র এবং আইকন আমদানির জন্য আমার বর্তমান ওয়ার্কফ্লো এখানে রয়েছে:

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

এটি অগোছালো দ্রুত পায়। আমি যা চাই তা এখানে:

import * from './images'

<img src={doggy} />
<img src={turtle} />

আমি মনে করি যে কোনও নামীকরণের সম্প্রসারণ হিসাবে একটি নির্দিষ্ট ডিরেক্টরি থেকে সমস্ত ফাইলকে গতিশীলভাবে আমদানির কোনও উপায় থাকতে হবে এবং তারপরে প্রয়োজনীয় ফাইলগুলি ব্যবহার করুন।

যে কেউ এই কাজটি দেখেছেন, বা এটি সম্পর্কে যাওয়ার সর্বোত্তম পথে কোনও ধারণা আছে?

হালনাগাদ:

নির্বাচিত উত্তরটি ব্যবহার করে, আমি এটি করতে সক্ষম হয়েছি:

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

Question 2

আমি মনে করি যে কোনও নামীকরণের সম্প্রসারণ হিসাবে একটি নির্দিষ্ট ডিরেক্টরি থেকে সমস্ত ফাইলকে গতিশীলভাবে আমদানির কোনও উপায় থাকতে হবে এবং তারপরে প্রয়োজনীয় ফাইলগুলি ব্যবহার করুন।

ES6 এ নেই। সমগ্র বিন্দু importএবং exportযে নির্ভরতা নির্ধারিত করা যেতে পারে স্ট্যাটিক্যালি , অর্থাত্ কোড নির্বাহ ছাড়া।

আপনি যেহেতু ওয়েবপ্যাক ব্যবহার করছেন তাই একবার দেখুন require.context। আপনার নিম্নলিখিতগুলি করতে সক্ষম হবেন:

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

Question 3

এটি সহজ. আপনি এর মধ্যে require(একটি স্থিতিশীল পদ্ধতি, আমদানি কেবল গতিশীল ফাইলগুলির জন্য) ব্যবহার করতে পারেন render। নীচের উদাহরণ মত:

render() {
    const {
      someProp,
    } = this.props

    const graphImage = require('./graph-' + anyVariable + '.png')
    const tableImage = require('./table-' + anyVariable2 + '.png')

    return (
    <img src={graphImage}/>
    )
}

Question 4

আমার কাছে পিএনজি দেশীয় পতাকাগুলির ডিরেক্টরি রয়েছে যেমন নাম করা হয়েছে au.png, nl.png ইত্যাদি। তাই আমার কাছে রয়েছে:

-svg-country-flags
 --png100px
   ---au.png
   ---au.png
 --index.js
 --CountryFlagByCode.js

index.js

const context = require.context('./png100px', true, /.png$/);

const obj = {};
context.keys().forEach((key) => {
  const countryCode = key.split('./').pop() // remove the first 2 characters
    .substring(0, key.length - 6); // remove the file extension
  obj[countryCode] = context(key);
});

export default obj;

আমি এর মতো একটি ফাইল পড়েছি:

কান্ট্রিফ্ল্যাগবাইকোড.জেএস

import React from 'react';
import countryFlags from './index';

const CountryFlagByCode = (countryCode) => {
    return (
        <div>
          <img src={countryFlags[countryCode.toLowerCase()]} alt="country_flag" />
        </div>
      );
    };

export default CountryFlagByCode;

Question 5

এই সমস্যাটি সমাধানের জন্য কার্যকরী পদ্ধতি:

const importAll = require =>
  require.keys().reduce((acc, next) => {
    acc[next.replace("./", "")] = require(next);
    return acc;
  }, {});

const images = importAll(
  require.context("./image", false, /\.(png|jpe?g|svg)$/)
);

Question 6

হালনাগাদ মনে হচ্ছে আমি প্রশ্নটি বেশ বুঝতে পারি নি। @ ফেলিক্স এটি ঠিক পেয়েছে তাই তার উত্তরটি পরীক্ষা করুন। নিম্নলিখিত কোডটি কেবল একটি নোডেজ পরিবেশে কাজ করবে।

ফোল্ডারে একটি index.jsফাইল যুক্ত করুনimages

const testFolder = './';
const fs = require('fs');
const path = require('path')

const allowedExts = [
  '.png' // add any extensions you need
]

const modules = {};

const files = fs.readdirSync(testFolder);

if (files && files.length) {
  files
    .filter(file => allowedExts.indexOf(path.extname(file)) > -1)
    .forEach(file => exports[path.basename(file, path.extname(file))] = require(`./${file}`));
}

module.exports = modules;

এটি আপনাকে অন্য ফাইল থেকে সমস্ত কিছু আমদানি করার অনুমতি দেবে এবং ওয়েপব্যাক এটিকে বিশ্লেষণ করবে এবং প্রয়োজনীয় ফাইলগুলি লোড করবে।