Как бы я импортировал этот экспорт es6? Они названы экспорт или дефолт?

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 Скажите, это часть Вавилона stage-1 предустановка и называется расширением экспорта

---

export default from './Dialog' также действителен, см.: https://github.com/tc39/proposal-export-default-from

Answer 3

index.js "волшебство" и означает "экспорт этого каталога". Это позволяет вам сгруппировать кучу связанных вещей в каталог и иметь возможность импортировать напрямую из каталога dir. В вашем примере он имеет один экспорт по умолчанию 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