कैसे आवश्यकता के बिना वेबपैक का उपयोग करके निर्देशिका में सभी फाइलों को लोड करना है

Question

मेरे पास अपने ऐप में 4 सबडायरेक्टरी में विभाजित बड़ी मात्रा में जावास्क्रिप्ट फाइलें हैं। ग्रंट में मैं उन सभी को पकड़ता हूं और उन्हें एक फाइल में संकलित करता हूं। इन फ़ाइलों में एक मॉड्यूल .exports फ़ंक्शन नहीं है।

मैं वेबपैक का उपयोग करना चाहता हूं और इसे 4 भागों में विभाजित करता हूं। मैं मैन्युअल रूप से नहीं जाना चाहता और मुझे अपनी सभी फ़ाइलों की आवश्यकता है।

मैं एक प्लगइन बनाना चाहता हूं जो संकलन पर निर्देशिका पेड़ों को चलाता है, फिर सभी .js फ़ाइल नामों और पथों को पकड़ता है, फिर उप निर्देशिकाओं में सभी फ़ाइलों की आवश्यकता होती है और इसे आउटपुट में जोड़ता है।

मैं चाहता हूं कि प्रत्येक निर्देशिका में सभी फाइलें एक मॉड्यूल में संकलित की जाएं जो मुझे अपनी प्रविष्टि बिंदु फ़ाइल से आवश्यकता हो सकती हैं, या http://webpack.github.io/docs/plugins.html उल्लेखों में शामिल हैं।

एक नई फ़ाइल जोड़ते समय मैं इसे सही निर्देशिका में छोड़ना चाहता हूं और जानता हूं कि इसे शामिल किया जाएगा।

क्या वेबपैक या प्लगइन के साथ ऐसा करने का कोई तरीका है जो किसी ने ऐसा करने के लिए लिखा है?

Answer 1

मैंने इसे हासिल करने के लिए यही किया है:

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

Comments

क्या लोडर का उपयोग करने के लिए निर्दिष्ट करने का कोई तरीका है? मेरा उपयोग मामला यह है कि मैं image-size-loaderसही पहलू अनुपात वाले प्लेसहोल्डर्स बनाने के लिए सभी छवियों के लिए उपयोग करना चाहता हूं ।

— बोब्बालुबा

क्या आप आपको काम करने का नमूना प्रदान कर सकते हैं webpack.config.js

— पटेल

@ बब्बलुबा, आप विन्यास फाइल में लोडर निर्दिष्ट कर सकते हैं loaders: [ { test: /\.json$/, loader: 'json' } ]:। { test: /\.json$/, loader: 'json' }जब तक आप लोडर को स्थापित कर लेते हैं, तब तक .json फ़ाइलों के लिए json लोडर जोड़ता है।

— जेक

ध्यान रखें कि यदि आप एक फ़ंक्शन लिखकर यहां DRY होने की कोशिश करते हैं जो require.context(...)आपके लिए कॉल करता है (जैसे कि यदि आप कई फ़ोल्डरों में सब कुछ की आवश्यकता करने की कोशिश कर रहे हैं), तो वेबपैक एक चेतावनी फेंक देगा। require.contextसंकलित समय-स्थिरांक होने के तर्क ।

— आइजैक

@Joel npmjs.com/package/require-context 2017 में बनाया गया था और मेरा जवाब 2015 से है, इसलिए यह कहना मुश्किल है कि इसे वहां से सीधे लिया जाता है। भी ध्यान रखें कि require-contextएक आवरण के आसपास है webpack, और इसकी नमूना से लिया जाता है webpackपर के प्रलेखन webpack.js.org/guides/dependency-management/#context-module-api - जो 2016 में जोड़ा गया था (में github.com/webpack/ webpack.js.org/commit/… ), मैंने अपना उत्तर लिखने के बाद भी ... हो सकता है कि वेबपैक के लेखक मेरे उत्तर से प्रभावित हों। ध्यान दें कि उन्होंने इसे कैश करने के लिए विस्तारित किया है।

— 23

Answer 2

अपनी ऐप फ़ाइल में मैंने आवश्यकता डाल दी

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

इस पोस्ट के सौजन्य से: https://github.com/webpack/webpack/issues/118

यह अब मेरी सभी फाइलों को जोड़ रहा है। मेरे पास html और css के लिए लोडर है और यह बहुत अच्छा काम करता है।

Comments

exprइस उदाहरण में क्या है ?

— ट्विज

exprसंदर्भ फ़ोल्डर के भीतर एक एकल फ़ाइल का पथ है। इसलिए यदि आपको यह करने की आवश्यकता है कि सभी html फ़ाइलों की आवश्यकता नहीं है, तो यह उपयोगी है। webpack.github.io/docs/context.html#context-module-api

— mkoryak

यह अभी भी मेरे लिए स्पष्ट नहीं है exprकि वेबपैक डॉक्स को देखने के बाद भी यहां क्या तर्क दिया जा रहा है। क्या "यह सब html फ़ाइलों की आवश्यकता के लिए नहीं है" मतलब है? धन्यवाद

— mikkelrd

मुझे अनट्रेडेड संदर्भ मिला है : एक्सप्र को परिभाषित नहीं किया गया है । उस बारे में कोई संकेत?

— सीएसचुलज

फिर भी इसका कोई जवाब नहीं है exprकि यहाँ क्या अर्थ है

— विज्ज़ुल

Answer 3

एक फ़ोल्डर में सभी फ़ाइलों के नक्शे के बारे में कैसे?

// { 
//   './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, /.*/));

Comments

धन्यवाद इस उदाहरण को छोड़ने का। मैंने मानचित्र का उपयोग केवल उस मान को लौटाया है जिसमें मेरी प्रत्येक फ़ाइल =) निर्यात की गई है।

— कैकोडर

Answer 4

वर्तमान फ़ोल्डर में सभी छवियों का मानचित्र कैसे प्राप्त करें, इसका उदाहरण।

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

Answer 5

सभी योग्यता @ धन्यवाद (धन्यवाद) के लिए।

लेकिन यहां मेरा अपना व्युत्पन्न संस्करण है।

लाभ:

• किसी {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'
    }
  }
}

Answer 6

यह मेरे लिए काम करता है:

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

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

नोट: इसके लिए .js / .js/ पुनरावर्ती रूप से .js फ़ाइलों की आवश्यकता हो सकती है।