Javascript 是否可以使用通配符从目录中的所有文件导入模块？

使用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';

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

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

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

或者类似的东西，每个文件都包含一个默认导出，并且每个模块的名称与其文件相同

---

这可能吗？

我认为这是不可能的，但模块名称的解析取决于模块加载器，因此可能有一个加载器实现支持这一点

在此之前，您可以使用位于

lib/things/index.js

的中间“模块文件”，该文件只包含

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

这样你就可以

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

---

我认为这是不可能的，但是模块名称的解析取决于模块加载器，因此可能有一个加载器实现支持这一点

在此之前，您可以使用位于

lib/things/index.js

的中间“模块文件”，该文件只包含

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

这样你就可以

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

---

只是答案中已经提供的主题的一个变体，但是这个呢：

在

事物中

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'

---

只是答案中已经提供的主题的一个变体，但是这个呢：

在

事物中

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'

---

如果您不导出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()

---

如果您不导出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()

---

我曾多次使用它们（特别是在构建将数据拆分到多个文件（例如AST节点）上的大型对象时），为了构建它们，我制作了一个小脚本（我刚刚将其添加到npm中，以便其他人都可以使用）

用法（目前您需要使用babel来使用导出文件）：

生成包含以下内容的文件：

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

---

我曾多次使用它们（特别是在构建将数据拆分到多个文件（例如AST节点）上的大型对象时），为了构建它们，我制作了一个小脚本（我刚刚将其添加到npm中，以便其他人都可以使用）

用法（目前您需要使用babel来使用导出文件）：

生成包含以下内容的文件：

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

---

目前的答案提出了一个解决办法，但我对为什么不存在这个问题感到困惑，所以我创建了一个

babel

插件来实现这一点

使用以下方式安装：

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

然后将其添加到您的

.babelrc

，方法是：

{
    "plugins": ["wildcard"]
}

有关详细的安装信息，请参阅

---

这允许您执行以下操作：

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

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

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

同样，包含了关于它具体做什么的更多信息，但这样做可以避免创建

index.js

文件，也可以在编译时进行，以避免在运行时执行

readdir

s

此外，对于较新版本，您可以完全按照您的示例执行：

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

---

工作原理与上述相同。

当前的答案建议了一个解决方法，但我对为什么不存在这个问题感到困惑，因此我创建了一个

babel

插件来实现这一点

使用以下方式安装：

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

然后将其添加到您的

.babelrc

，方法是：

{
    "plugins": ["wildcard"]
}

有关详细的安装信息，请参阅

---

这允许您执行以下操作：

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

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

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

同样，包含了关于它具体做什么的更多信息，但这样做可以避免创建

index.js

文件，也可以在编译时进行，以避免在运行时执行

readdir

s

此外，对于较新版本，您可以完全按照您的示例执行：

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

---

工作原理与上述相同。

只是@Bergi答案的另一种方法

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

export default {
 ThingA,
 ThingB,
 ThingC
}

使用

---

这只是@Bergi回答的另一种方法

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

export default {
 ThingA,
 ThingB,
 ThingC
}

使用

---

这并不完全是您所要求的，但是，使用此方法，我可以在其他文件中迭代

componentsList

，并使用

componentsList.map（…）

等函数，我觉得非常有用

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;

---

这并不完全是您所要求的，但是，使用此方法，我可以在其他文件中迭代

componentsList

，并使用

componentsList.map（…）

等函数，我觉得非常有用

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;

---

大咕咕咕咕！这比需要的要难

导出一个单位默认值 这是在下面的

{…事项，…联系人}

中使用（

..

的绝佳机会：

// imports/collections/Matters.js
export default {           // default export
  hello: 'World',
  something: 'important',
};

然后，到（从项目根/）：

$npm安装--保存dev@babel/core@babel/cli@babel/preset env@babel/node
（已修剪）
$npx babel节点——预设@babel/preset env imports/test.js
{你好：'月亮'，
“重要”，
电邮:'hello@example.com' }

导出一个类似于默认值的树 如果不希望覆盖属性，请更改：

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

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

输出将是：

$npx babel节点--presets@babel/preset env imports/test.js
{重要事项：{你好：'世界'，重要事项}，
联系人：{你好：'Moon'，电子邮件：'hello@example.com' } }

导出多个命名导出，无默认值 如果专用于，则导入上的语法也会更改：

// imports/collections/index.js

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

这将创建2个命名导出，但没有默认导出。然后更改：

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

console.log(Matters, Contacts);

以及输出：

$npx babel节点--presets@babel/preset env imports/test.js
{你好：'World'，某事：'important'}{你好：'Moon'，电子邮件：'hello@example.com' }

导入所有命名的导出 注意上一个示例中的

从“/collections”导入{Matters，Contacts}；

$npx babel节点--presets@babel/preset env imports/test.js
{事项：[Getter]，联系人：[Getter]}
{你好：'World'，某事：'important'}{你好：'Moon'，电子邮件：'hello@example.com' }

实际上 给定这些源文件：

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

<