Question

我正在看看Material UI项目中的这段代码，似乎是export一系列React组件：

src/Dialog/index.js：

export { default } from './Dialog';
export { default as DialogActions } from './DialogActions';
export { default as DialogTitle } from './DialogTitle';
export { default as DialogContent } from './DialogContent';
export { default as DialogContentText } from './DialogContentText';
export { default as withResponsiveFullScreen } from './withResponsiveFullScreen';

如果我尝试这些，导入语句会是什么样子？他们是否导入模块并将其导出到同一行？为什么不使用export default Dialog语法？

Answer 1

这与导入和命名导出基本相同。

此片段：

export { default as DialogActions } from './DialogActions';

大致相当于：

import DialogActions from './DialogActions';
export DialogActions;

如果您想在文件中使用它，您可以使用命名导入，如下所示：

import { DialogActions } from './src/Dialog/index.js'

Answer 2

是的，它允许您使用单个export语句导入和重新导出模块，它是babel stage-1预设的一部分，名为export extensions

export default from './Dialog'也有效，请参阅：https://github.com/tc39/proposal-export-default-from#exporting-a-default-as-default

Answer 3

index.js是“魔术”，表示“此目录的导出”。这使您可以将一堆相关的东西分组到一个目录中，并能够直接从目录路径中导入。在您的示例中，它具有一个默认导出为Dialog，其他默认导出为命名导出。因此，您将导入例如：

import Dialog, { DialogTitle, DialogContent } from `path/to/DialogModule`

这比没有index.js的情况要好用

import Dialog from 'path/to/DialogModule/Dialog/Dialog'
import Dialog from 'path/to/DialogModule/DialogTitle/DialogTitle'
import Dialog from 'path/to/DialogModule/DialogContent/DialogContent'

这也是指定要向该模块用户公开的内容的便捷方法。目录中可能还有50个其他文件，而从path/to/DialogModule导入时这些文件将不可见。 如果index.js是npm模块的主要输出，这特别有用。只有使用该模块的另一个项目才能看到（import）这些输出。在同一目录中可能还有很多其他内容，它们并不适合用户使用。

例如文件结构可能是：

DialogModule/
├── actions.js
├── Dialog
│   ├── Dialog.css
│   ├── Dialog.js
│   ├── Dialog.test.js
│   └── index.js
├── DialogActions
│   ├── DialogActions.css
│   ├── DialogActions.js
│   ├── DialogActions.test.js
│   └── index.js
├── DialogContent
│   ├── DialogContent.css
│   ├── DialogContent.js
│   ├── DialogContent.test.js
│   └── index.js
├── DialogContentText
│   ├── DialogContentText.css
│   ├── DialogContentText.js
│   ├── DialogContentText.test.js
│   └── index.js
├── DialogTitle
│   ├── DialogTitle.css
│   ├── DialogTitle.js
│   ├── DialogTitle.test.js
│   └── index.js
├── index.js
├── SecretComponent1
│   ├── index.js
│   ├── SecretComponent1.css
│   ├── SecretComponent1.js
│   └── SecretComponent1.test.js
├── SecretComponent2
│   ├── index.js
│   ├── SecretComponent2.css
│   ├── SecretComponent2.js
│   └── SecretComponent2.test.js
├── util
└── util.test.js

我如何导入这些es6出口？它们是出口还是默认？

3 个答案: