Javascript如何导出组内的模块

Question

我在文件夹 ux 中有几个 React 组件作为库(下面是一些内容):

import MessageBar from "./atoms/MessageBar/MessageBar";
import Spinner from "./atoms/Spinner/Spinner";
import Button from "./atoms/Button/Button";
import AccordionHeader from "./molecules/AccordionHeader/AccordionHeader";
import AutocompleteList from "./molecules/AutocompleteList/AutocompleteList";
import ButtonGroup from "./molecules/ButtonGroup/ButtonGroup";
import LoginPanel from "./organisms/LoginPanel/LoginPanel";
import WelcomePanel from "./organisms/WelcomePanel/WelcomePanel";

我希望导出这些对象，以便可以从其组中导入它:

import LoginPanel from "ux.organisms";

或者

import Button from "ux/atoms";

或者其他什么。

这个想法是，您从 ux 库内的特定组获取元素。

导出所有这些组件并组织成组(原子、分子、有机体等)的建议方法是什么？

PS:

a.我不想更改组件名称(ButtomAtom 等...)

b.结果将是一个可供其他项目导入的 npm 库。因此，此代码将驻留在我的 ux/index.js 文件中。

Answer 1

然后在 ux/atoms/ 创建一个 index.js 文件并填充:

import MessageBar from "./MessageBar/MessageBar";
import Spinner from "./Spinner/Spinner";
import Button from "./Button/Button";
//...

export { MessageBar, Spinner, Button };

所以现在我们可以做:

import { MessageBar } from "ux/atoms";

或者如果您需要每个子模块:

import * as Atoms from "ux/atoms";