Dengan ES6, saya dapat mengimpor beberapa ekspor dari file seperti ini:

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

Namun, saya suka organisasi memiliki satu modul per file. Saya berakhir dengan impor seperti ini:

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

Saya ingin sekali dapat melakukan ini:

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

atau sesuatu yang serupa, dengan konvensi yang dipahami bahwa setiap file berisi satu ekspor default, dan setiap modul dinamai sama dengan file-nya.

Apakah ini mungkin?

Saya tidak berpikir ini mungkin, tetapi afaik resolusi nama modul hingga modul loader sehingga mungkin ada implementasi loader yang mendukung ini.

Sampai saat itu, Anda dapat menggunakan "file modul" antara lib/things/index.jsyang baru saja berisi

export * from 'ThingA';
export * from 'ThingB';
export * from 'ThingC';

dan itu akan memungkinkan Anda untuk melakukannya

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

Hanya variasi pada tema yang sudah disediakan dalam jawaban, tetapi bagaimana dengan ini:

Dalam Thing,

export default function ThingA () {}

Di things/index.js,

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

Kemudian untuk mengkonsumsi semua hal di tempat lain,

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

Atau hanya mengkonsumsi beberapa hal,

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

Jawaban saat ini menyarankan solusi tetapi disadap saya mengapa ini tidak ada, jadi saya telah membuat sebuah babelplugin yang melakukan ini.

Instal menggunakan:

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

lalu tambahkan ke Anda .babelrcdengan:

{
    "plugins": ["wildcard"]
}

lihat repo untuk info pemasangan terperinci

Ini memungkinkan Anda untuk melakukan ini:

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

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

sekali lagi, repo berisi informasi lebih lanjut tentang apa sebenarnya yang dilakukannya, tetapi melakukannya dengan cara ini menghindari membuat index.jsfile dan juga terjadi pada waktu kompilasi untuk menghindari melakukan readdirs saat runtime.

Juga dengan versi yang lebih baru Anda dapat melakukan persis seperti contoh Anda:

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

kerjanya sama seperti di atas.

Gugly gugly hebat! Ini lebih sulit daripada yang seharusnya.

Ekspor satu default datar

Ini adalah peluang bagus untuk menggunakan spread ( ...di { ...Matters, ...Contacts }bawah:

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

Kemudian, untuk menjalankan kode yang dikompilasi babel dari baris perintah (dari root proyek /):

$ 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]' }

Ekspor satu default mirip pohon

Jika Anda memilih untuk tidak menimpa properti, ubah:

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

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

Dan hasilnya adalah:

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

Ekspor beberapa nama ekspor tanpa standar

Jika Anda berdedikasi untuk KERING , sintaks pada impor juga berubah:

// imports/collections/index.js

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

Ini menciptakan 2 ekspor bernama tanpa ekspor default. Kemudian ubah:

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

console.log(Matters, Contacts);

Dan hasilnya:

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

Impor semua ekspor yang disebut

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

Perhatikan perusakan import { Matters, Contacts } from './collections'; pada contoh sebelumnya.

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

Dalam praktek

Diberikan file sumber ini:

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

Menciptakan /myLib/index.jsuntuk menggabungkan semua file mengalahkan tujuan impor / ekspor. Akan lebih mudah untuk membuat semuanya mendunia sejak awal, daripada membuat semuanya mendunia melalui impor / ekspor melalui index.js "file pembungkus".

Jika Anda menginginkan file tertentu, import thingA from './myLib/thingA';dalam proyek Anda sendiri.

Membuat "file pembungkus" dengan ekspor untuk modul hanya masuk akal jika Anda mengemas untuk npm atau pada proyek multi-tim multi-tahun.

Sampai sejauh ini? Lihat dokumen untuk detail lebih lanjut.

Juga, yay untuk Stackoverflow akhirnya mendukung tiga `s sebagai markup pagar kode.

Anda dapat menggunakan impor async ():

import fs = require('fs');

lalu:

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

Mirip dengan pertanyaan yang diterima tetapi memungkinkan Anda untuk menskalakan tanpa perlu menambahkan modul baru ke file indeks setiap kali Anda membuatnya:

./modules/moduleA.js

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

./modules/index.js

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

./example.js

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

Saya telah menggunakannya beberapa kali (khususnya untuk membangun objek besar yang memisahkan data ke banyak file (mis. AST node)), untuk membangunnya saya membuat skrip kecil (yang baru saja saya tambahkan ke npm sehingga semua orang lain dapat menggunakannya).

Penggunaan (saat ini Anda harus menggunakan babel untuk menggunakan file ekspor):

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

Menghasilkan file yang mengandung:

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

Maka Anda cukup mengonsumsi file:

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

Hanya pendekatan lain untuk jawaban @ Bergi

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

export default {
 ThingA,
 ThingB,
 ThingC
}

Penggunaan

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

Anda dapat menggunakan persyaratan juga:

const moduleHolder = []

function loadModules(path) {
  let stat = fs.lstatSync(path)
  if (stat.isDirectory()) {
    // we have a directory: do a tree walk
    const files = fs.readdirSync(path)
    let f,
      l = files.length
    for (var i = 0; i < l; i++) {
      f = pathModule.join(path, files[i])
      loadModules(f)
    }
  } else {
    // we have a file: load it
    var controller = require(path)
    moduleHolder.push(controller)
  }
}

Kemudian gunakan modulHolder Anda dengan pengontrol yang dimuat secara dinamis:

  loadModules(DIR) 
  for (const controller of moduleHolder) {
    controller(app, db)
  }

Ini tidak persis apa yang Anda minta tetapi, dengan metode ini saya dapat beralih componentsListdi file saya yang lain dan menggunakan fungsi seperti componentsList.map(...)yang saya temukan sangat berguna!

import StepOne from './StepOne';
import StepTwo from './StepTwo';
import StepThree from './StepThree';
import StepFour from './StepFour';
import StepFive from './StepFive';
import StepSix from './StepSix';
import StepSeven from './StepSeven';
import StepEight from './StepEight';

const componentsList= () => [
  { component: StepOne(), key: 'step1' },
  { component: StepTwo(), key: 'step2' },
  { component: StepThree(), key: 'step3' },
  { component: StepFour(), key: 'step4' },
  { component: StepFive(), key: 'step5' },
  { component: StepSix(), key: 'step6' },
  { component: StepSeven(), key: 'step7' },
  { component: StepEight(), key: 'step8' }
];

export default componentsList;

Jika Anda menggunakan paket web. Ini mengimpor file secara otomatis dan mengekspor sebagai api namespace.

Jadi tidak perlu memperbarui pada setiap penambahan file.

import camelCase from "lodash-es";
const requireModule = require.context("./", false, /\.js$/); // 
const api = {};

requireModule.keys().forEach(fileName => {
  if (fileName === "./index.js") return;
  const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ""));
  api[moduleName] = {
    ...requireModule(fileName).default
  };
});

export default api;

Untuk pengguna naskah;

import { camelCase } from "lodash-es"
const requireModule = require.context("./folderName", false, /\.ts$/)

interface LooseObject {
  [key: string]: any
}

const api: LooseObject = {}

requireModule.keys().forEach(fileName => {
  if (fileName === "./index.ts") return
  const moduleName = camelCase(fileName.replace(/(\.\/|\.ts)/g, ""))
  api[moduleName] = {
    ...requireModule(fileName).default,
  }
})

export default api

Saya dapat mengambil dari pendekatan atilkan pengguna dan memodifikasinya sedikit:

Untuk pengguna naskah;

require.context('@/folder/with/modules', false, /\.ts$/).keys().forEach((fileName => {
    import('@/folder/with/modules' + fileName).then((mod) => {
            (window as any)[fileName] = mod[fileName];
            const module = new (window as any)[fileName]();

            // use module
});

}));

jika Anda tidak mengekspor default di A, B, C tetapi hanya mengekspor {} maka dimungkinkan untuk melakukannya

// 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()