বিবরণীর প্রয়োজন ছাড়াই ওয়েবপ্যাক ব্যবহার করে কোনও ডিরেক্টরিতে সমস্ত ফাইল লোড করতে হয়

Question 1

আমার অ্যাপ্লিকেশনে আমার প্রচুর জাভাস্ক্রিপ্ট ফাইলগুলি 4 টি উপ-ডিরেক্টরিতে বিভক্ত। গ্রান্টে আমি তাদের সকলকে ধরে একটি ফাইলে সংকলন করি। এই ফাইলগুলির একটি মডিউল.এক্সপোর্ট ফাংশন নেই।

আমি ওয়েবপ্যাকটি ব্যবহার করতে এবং এটিকে 4 টি ভাগে ভাগ করতে চাই। আমি নিজে যেতে চাই না এবং আমার সমস্ত ফাইলের প্রয়োজন।

আমি একটি প্লাগইন তৈরি করতে চাই যা সংকলনে ডিরেক্টরি গাছগুলি চলবে, তারপরে সমস্ত .js ফাইলের নাম এবং পথ ধরে, তারপরে সাব ডিরেক্টরিগুলিতে সমস্ত ফাইল প্রয়োজন এবং এটি আউটপুটে যুক্ত করে।

আমি প্রতিটি ডিরেক্টরিতে থাকা সমস্ত ফাইলকে একটি মডিউলে সংকলিত করতে চাই যা আমার তারপরে আমার এন্ট্রি পয়েন্ট ফাইল থেকে প্রয়োজন হতে পারে বা যে সম্পদগুলিতে অন্তর্ভুক্ত করতে পারে http://webpack.github.io/docs/plugins.html উল্লিখিত হয়েছে।

একটি নতুন ফাইল যুক্ত করার সময় আমি কেবল এটি সঠিক ডিরেক্টরিতে ফেলে দিতে চাই এবং এটি অন্তর্ভুক্ত করা হবে তা জানতে চাই।

ওয়েবপ্যাক বা এমন কোনও প্লাগইন যা এটি করার জন্য লিখেছিল তা দিয়ে কি এটি করার কোনও উপায় আছে?

Question 2

এটি অর্জনের জন্য আমি এটিই করেছি:

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));

Question 3

আমার অ্যাপ্লিকেশন ফাইলটিতে আমি প্রয়োজনীয়তাটি শেষ করেছি

require.context(
  "./common", // context folder
  true, // include subdirectories
  /.*/ // RegExp
)("./" + expr + "")

এই পোস্টটির সৌজন্যে: https://github.com/webpack/webpack/issues/118

এটি এখন আমার সমস্ত ফাইল যুক্ত করছে। আমার এইচটিএমএল এবং সিএসএসের জন্য একটি লোডার রয়েছে এবং এটি দুর্দান্ত কাজ করছে বলে মনে হচ্ছে।

Question 4

কোনও ফোল্ডারের সমস্ত ফাইলের মানচিত্র সম্পর্কে কীভাবে?

// { 
//   './image1.png':  'data:image/png;base64,iVBORw0KGgoAAAANS',
//   './image2.png':  'data:image/png;base64,iVBP7aCASUUASf892',
// }

এটা কর:

const allFiles = (ctx => {
    let keys = ctx.keys();
    let values = keys.map(ctx);
    return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
})(require.context('./path/to/folder', true, /.*/));

Question 5

বর্তমান ফোল্ডারে সমস্ত চিত্রের মানচিত্র কীভাবে পাবেন তার উদাহরণ।

const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/;

function mapFiles(context) {
  const keys = context.keys();
  const values = keys.map(context);
  return keys.reduce((accumulator, key, index) => ({
    ...accumulator,
    [key]: values[index],
  }), {});
}

const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));

Question 6

@ স্প্লিন্টর (সমস্ত ধন্যবাদ) এর সমস্ত যোগ্যতা।

তবে এখানে এটি আমার নিজস্ব প্রাপ্ত সংস্করণ।

উপকারিতা:

কি মডিউল রফতানি একটি {module_name: exports_obj}বস্তুর অধীনে জড়ো করা হয় ।
- মডিউল_নাম এর ফাইল নাম থেকে নির্মিত হয়।
- ... প্রসার ছাড়াই এবং আন্ডারস্কোর দ্বারা স্ল্যাশগুলি প্রতিস্থাপন ছাড়াই (সাব-ডিরেক্টরী স্ক্যানের ক্ষেত্রে)।
স্বনির্ধারণ সহজ করার জন্য মন্তব্য যুক্ত করা হয়েছে।
- অর্থাৎ আপনি যদি উপ-ডিরেক্টরিগুলিতে ফাইলগুলি অন্তর্ভুক্ত না করতে চান তবে যদি বলুন যে, সেগুলি রুট স্তরের মডিউলগুলির জন্য ম্যানুয়ালি প্রয়োজন ।

সম্পাদনা: যদি আমার মতো আপনিও নিশ্চিত যে আপনার মডিউলগুলি নিয়মিত জাভাস্ক্রিপ্ট অবজেক্টের (অন্তত রুট স্তরে) অন্য কোনও কিছু ফেরত দেবে না, তবে আপনি তাদের মূল ডিরেক্টরি কাঠামোর প্রতিরূপ তৈরি করে "মাউন্ট" করতে পারেন ( কোডটি (গভীর সংস্করণ দেখুন) ) শেষে বিভাগ)।

কোড (মূল সংস্করণ):

function requireAll(r) {
    return Object.fromEntries(
        r.keys().map(function(mpath, ...args) {
            const result =  r(mpath, ...args);
            const name = mpath
                .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
                .replace(/\//g, '_') // Relace '/'s by '_'s
            ;
            return [name, result];
        })
    );
};
const allModules = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

উদাহরণ:

চূড়ান্ত জন্য নমুনা আউটপুট console.log(allModules);:

{
  main: { title: 'Webpack Express Playground' },
  views_home: {
    greeting: 'Welcome to Something!!',
    title: 'Webpack Express Playground'
  }
}

ডিরেক্টরি গাছ:

models
├── main.js
└── views
    └── home.js

কোড (গভীর সংস্করণ):

function jsonSet(target, path, value) {
    let current = target;
    path = [...path]; // Detach
    const item = path.pop();
    path.forEach(function(key) {
        (current[key] || (current[key] = {}));
        current = current[key];
    });
    current[item] = value;
    return target;
};
function requireAll(r) {
    const gather = {};
    r.keys().forEach(function(mpath, ...args) {
        const result =  r(mpath, ...args);
        const path = mpath
            .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
            .split('/')
        ;
        jsonSet(gather, path, result);
    });
    return gather;
};
const models = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

উদাহরণ:

এই সংস্করণটি ব্যবহার করে পূর্ববর্তী উদাহরণের ফলাফল:

{
  main: { title: 'Webpack Express Playground' },
  views: {
    home: {
      greeting: 'Welcome to Something!!',
      title: 'Webpack Express Playground'
    }
  }
}

Question 7

এটি আমার পক্ষে কাজ করে:

function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));

দ্রষ্টব্য: এর জন্য ./js/ এর পুনর্বিবেচনার সাবডিয়ারগুলিতে .js ফাইলের প্রয়োজন হতে পারে।