如何从 ES6 的目录中导入所有文件？答案

【问题标题】：How to import all files from a directory in ES6?如何从 ES6 的目录中导入所有文件？
【发布时间】：2019-04-09 05:40:25
【问题描述】：

没有进入代码，我有一个奇怪的情况，使用 ReactJS 的框架将根据其用例导入未知数量的文件。有时开发人员可能要导入 5 个文件，有时是 2....

因此，一个组件实际上是在导入一堆文件，如下所示。有没有办法通过遍历它们来编写“从页面目录导入所有文件”的代码？我知道这可能是不可能的，因为 React 是一种非服务器端语言，但至少必须有更好的方法来导入它们......

旁注，名称在导入时并不重要

import one from '../pages/1_1';
import two from '../pages/2_1';
import three from '../pages/3_1';
import four from '../pages/4_1';
import five from '../pages/5_1';
import six from '../pages/6_1';
import seven from '../pages/7_1';
import eight from '../pages/8_1';

const Contents = [one,two,three,four,five,six,seven,eight];

export default Contents;

【问题讨论】：

您使用的是什么类型的服务器？您的服务器可以生成包含所有导入的页面顶部吗？您如何知道如何调用每个变量以及如何将其与您正在导入的文件相关联？
不，ES6 没有任何文件系统知识。但是，如果您发现自己一次又一次地导入相同的文件，。您可以创建另一个将它们导出到对象文字中。例如..import pages from '../pages'; const Contents = [one, two, three,...] = pages;
可能是此 Q 的副本stackoverflow.com/questions/42118296/…
“由于 React 是一种非服务器端语言” React 既不是一种语言，也不涉及加载/处理模块依赖项。
基本上是 stackoverflow.com/q/29722270/218196 的副本。但是，如果您使用的是 React，您可能会使用模块捆绑器。捆绑器可能能够导入整个目录。您应该告诉我们您正在使用哪个捆绑器（webpack、rollup、browserify 等）

标签： javascript ecmascript-6

【解决方案1】：

您的浏览器中运行的 JS 无法（没有服务器端代码）知道文件系统的文件夹结构。因此“从文件夹中导入所有文件”是不可能的。您可以做的是（手动）导入模块中的所有文件并管理模块本身。

参考：https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

【讨论】：