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




ecmascript-6 es6-module-loader (8)

@ बर्गी के जवाब के लिए एक अन्य दृष्टिकोण

// require all modules on the path and with the pattern defined
const req = require.context('./', true, /.js$/);

const modules = req.keys().map(req);

// export all modules
module.exports = modules;

उपयोग

import { example, anotherExample } from './modules'

ES6 के साथ, मैं इस तरह से एक फ़ाइल से कई निर्यात आयात कर सकता हूं:

import {ThingA, ThingB, ThingC} from 'lib/things';

हालाँकि, मुझे प्रति फ़ाइल एक मॉड्यूल रखने का संगठन पसंद है। मैं इस तरह से आयात को समाप्त करता हूं:

import ThingA from 'lib/things/ThingA';
import ThingB from 'lib/things/ThingB';
import ThingC from 'lib/things/ThingC';

मैं ऐसा करने में सक्षम होना पसंद करूंगा:

import {ThingA, ThingB, ThingC} from 'lib/things/*';

या ऐसा ही कुछ, इस समझ के साथ कि प्रत्येक फ़ाइल में एक डिफ़ॉल्ट निर्यात होता है, और प्रत्येक मॉड्यूल को उसकी फ़ाइल के समान नाम दिया गया है।

क्या यह संभव है?


आप async आयात () का उपयोग कर सकते हैं:

आयात fs = आवश्यकता ('fs');

और फिर:

fs.readdir('./someDir', (err, files) => {
 files.forEach(file => {
  const module = import('./' + file).then(m =>
    m.callSomeMethod();
  );
  // or const module = await import('file')
  });
});

पहले से ही उत्तर में प्रदान की गई विषय पर एक बदलाव, लेकिन इस बारे में कैसे:

एक Thing ,

export default function ThingA () {}

things/index.js ,

export {default as ThingA} from './ThingA'
export {default as ThingB} from './ThingB'
export {default as ThingC} from './ThingC'

फिर अन्य सभी चीजों का उपभोग करने के लिए,

import * as things from './things'
things.ThingA()

या सिर्फ कुछ चीजों का सेवन करने के लिए,

import {ThingA,ThingB} from './things'

महान गुग्गुल! यह होना चाहिए की तुलना में कठिन था।

एक फ्लैट डिफ़ॉल्ट निर्यात करें

यह spread का उपयोग करने का एक शानदार अवसर है ( ... { ...Matters, ...Contacts } नीचे में:

// imports/collections/Matters.js
export default {           // default export
  hello: 'World',
  something: 'important',
};
// imports/collections/Contacts.js
export default {           // default export
  hello: 'Moon',
  email: '[email protected]',
};
// imports/collections/index.js
import Matters from './Matters';      // import default export as var 'Matters'
import Contacts from './Contacts';

export default {  // default export
  ...Matters,     // spread Matters, overwriting previous properties
  ...Contacts,    // spread Contacts, overwriting previosu properties
};
// imports/test.js
import collections from './collections';  // import default export as 'collections'

console.log(collections);

फिर, कमांड लाइन (प्रोजेक्ट रूट /) से बेबल संकलित कोड चलाने के लिए:

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 
(trimmed)

$ npx babel-node --presets @babel/preset-env imports/test.js 
{ hello: 'Moon',
  something: 'important',
  email: '[email protected]' }

एक पेड़ की तरह डिफ़ॉल्ट निर्यात करें

यदि आप गुणों को अधिलेखित नहीं करना चाहते हैं, तो परिवर्तन करें:

// imports/collections/index.js
import Matters from './Matters';     // import default as 'Matters'
import Contacts from './Contacts';

export default {   // export default
  Matters,
  Contacts,
};

और उत्पादन होगा:

$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
  Contacts: { hello: 'Moon', email: '[email protected]' } }

कई नामित निर्यातों को निर्यात करें w / कोई डिफ़ॉल्ट नहीं

यदि आप DRY लिए समर्पित हैं, तो आयात में सिंटैक्स भी बदलता है:

// imports/collections/index.js

// export default as named export 'Matters'
export { default as Matters } from './Matters';  
export { default as Contacts } from './Contacts'; 

यह 2 नामित निर्यात w / कोई डिफ़ॉल्ट निर्यात बनाता है। फिर बदलें:

// imports/test.js
import { Matters, Contacts } from './collections';

console.log(Matters, Contacts);

और आउटपुट:

$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: '[email protected]' }

सभी नामित निर्यात आयात करें

// imports/collections/index.js

// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
// imports/test.js

// Import all named exports as 'collections'
import * as collections from './collections';

console.log(collections);  // interesting output
console.log(collections.Matters, collections.Contacts);

import { Matters, Contacts } from './collections'; destructuring import { Matters, Contacts } from './collections'; पिछले उदाहरण में।

$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: '[email protected]' }

प्रयोग में

इन स्रोत फ़ाइलों को देखते हुए:

/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js

सभी फ़ाइलों को बंडल करने के लिए /myLib/index.js बनाना आयात / निर्यात के उद्देश्य को पराजित करता है। पहली जगह में सब कुछ वैश्विक बनाना आसान होगा, सब कुछ आयात / निर्यात के माध्यम से वैश्विक बनाने के बजाय index.js "रैपर फाइलों" के माध्यम से।

यदि आप एक विशेष फ़ाइल चाहते हैं, तो import thingA from './myLib/thingA'; अपनी खुद की परियोजनाओं में

मॉड्यूल के लिए निर्यात के साथ एक "रैपर फ़ाइल" बनाना केवल तभी समझ में आता है जब आप npm के लिए पैकेजिंग कर रहे हैं या एक बहु-वर्षीय मल्टी-टीम प्रोजेक्ट पर।

इसे दूर किया? अधिक विवरण के लिए docs देखें।

इसके अलावा, स्टैकओवरफ़्लो के लिए yay अंत में कोड बाड़ मार्कअप के रूप में तीन `का समर्थन करता है।


मैंने उन्हें कई बार इस्तेमाल किया है (विशेष रूप से कई फ़ाइलों (जैसे एएसटी नोड्स) पर डेटा को विभाजित करने वाली विशाल वस्तुओं के निर्माण के लिए, उन्हें बनाने के लिए मैंने एक छोटी सी स्क्रिप्ट बनाई थी (जो मैंने अभी-अभी एनपीएम में जोड़ा है, इसलिए बाकी सभी को। इसका उपयोग कर सकते हैं)।

उपयोग (वर्तमान में आपको निर्यात फ़ाइल का उपयोग करने के लिए कोलाहल का उपयोग करने की आवश्यकता होगी):

$ npm install -g folder-module
$ folder-module my-cool-module/

एक फ़ाइल बनाता है:

export {default as foo} from "./module/foo.js"
export {default as default} from "./module/default.js"
export {default as bar} from "./module/bar.js"
...etc

तब आप बस फ़ाइल का उपभोग कर सकते हैं:

import * as myCoolModule from "my-cool-module.js"
myCoolModule.foo()

यदि आप A, B, C में डिफ़ॉल्ट निर्यात नहीं करते हैं, लेकिन सिर्फ {} निर्यात करते हैं, तो ऐसा करना संभव है

// things/A.js
export function A() {}

// things/B.js
export function B() {}

// things/C.js
export function C() {}

// foo.js
import * as Foo from ./thing
Foo.A()
Foo.B()
Foo.C()

वर्तमान उत्तर वर्कअराउंड का सुझाव देते हैं, लेकिन यह मुझे परेशान करता है कि यह मौजूद क्यों नहीं है, इसलिए मैंने एक babel प्लगइन बनाया है जो ऐसा करता है।

इसका उपयोग करके इसे स्थापित करें:

npm i --save-dev babel-plugin-wildcard

फिर इसे अपने .babelrc जोड़ें:

{
    "plugins": ["wildcard"]
}

विस्तृत जानकारी के लिए repo देखें

यह आपको ऐसा करने की अनुमति देता है:

import * as Things from './lib/things';

// Do whatever you want with these :D
Things.ThingA;
Things.ThingB;
Things.ThingC;

फिर से, repo में आगे की जानकारी है कि यह वास्तव में क्या करता है, लेकिन इसे इस तरह से करने से index.js फाइलें बनाने से बचा जाता है और रनटाइम पर readdir करने से बचने के लिए संकलन-समय पर भी होता है।

इसके अलावा एक नए संस्करण के साथ आप अपना उदाहरण बिल्कुल पसंद कर सकते हैं:

 import { ThingsA, ThingsB, ThingsC } from './lib/things/*';

उपरोक्त के समान ही काम करता है।


स्वीकृत प्रश्न के समान लेकिन यह आपको एक बार बनाए गए सूचकांक फ़ाइल में एक नया मॉड्यूल जोड़ने की आवश्यकता के बिना स्केल करने की अनुमति देता है:

./modules/moduleA.js

// lib/things/index.js
import ThingA from './ThingA';
import ThingB from './ThingB';
import ThingC from './ThingC';

export default {
 ThingA,
 ThingB,
 ThingC
}

./modules/index.js

import {ThingA, ThingB, ThingC} from './lib/things';

./example.js

export const example = 'example';
export const anotherExample = 'anotherExample';






es6-modules