如何将目录设置为模块以实现JavaScript批量导入？

需求说明 #

我想实现类似import * as React from 'react'的导入方式，从一个文件夹批量导入自己的组件，之后通过导入模块的点符号访问各个组件。

比如我有一个AppBar组件，需要使用同文件夹下的AppsButton、HomeButton、BugReportButton、HelpButton这些JSX组件，每个组件文件都通过export default导出对应的视图函数。希望能这样导入：

import AppBar from '@mui/material/AppBar';
import * as AppBarContent from "./AppBar"; // 导入当前所在的AppBar文件夹

然后在视图中这样使用：

<AppBar>
    <AppBarContent.AppsButton />
    <AppBarContent.HomeButton />
    <AppBarContent.BugReportButton />
    <AppBarContent.HelpButton />
</AppBar>

之前的尝试 #

我曾尝试在AppBar文件夹下创建index.js文件，用CommonJS语法导出组件，但没有效果：

exports.AppsButton = require("./AppsButton");
exports.HomeButton = require("./HomeButton");
exports.BugReportButton = require("./BugReportButton");
exports.HelpButton = require("./HelpButton");
exports.HelpDrawer = require("./HelpDrawer");

正确实现步骤 #

1. 确认文件夹结构 #

确保你的文件结构如下：

src/
└── 你的组件目录/
    └── AppBar/
        ├── AppsButton.jsx
        ├── HomeButton.jsx
        ├── BugReportButton.jsx
        ├── HelpButton.jsx
        ├── HelpDrawer.jsx
        └── index.js

2. 用ES模块语法编写index.js #

React项目默认使用ES模块（import/export），而非CommonJS的require/exports，所以修改index.js为以下两种写法之一：

写法一：先导入再统一导出

import AppsButton from './AppsButton';
import HomeButton from './HomeButton';
import BugReportButton from './BugReportButton';
import HelpButton from './HelpButton';
import HelpDrawer from './HelpDrawer';

export {
  AppsButton,
  HomeButton,
  BugReportButton,
  HelpButton,
  HelpDrawer
};

写法二：直接重命名导出（更简洁）

export { default as AppsButton } from './AppsButton';
export { default as HomeButton } from './HomeButton';
export { default as BugReportButton } from './BugReportButton';
export { default as HelpButton } from './HelpButton';
export { default as HelpDrawer } from './HelpDrawer';

3. 导入并使用组件 #

现在就可以按照你期望的方式导入并使用组件了：

import AppBar from '@mui/material/AppBar';
import * as AppBarContent from "./AppBar";

在JSX中直接通过AppBarContent.组件名调用即可。

为什么之前的方法无效？ #

• React项目通常配置为使用ES模块，CommonJS语法（require/exports）和ES模块混用可能导致解析问题。
• 你的组件都是export default导出，用require导入时需要取.default属性，比如exports.AppsButton = require("./AppsButton").default;，但这种写法不如ES模块语法规范，不推荐。

内容的提问来源于stack exchange，提问作者Will