ES6 экспорт / импорт в индексный файл

202

В настоящее время я использую ES6 в приложении React через webpack / babel. Я использую индексные файлы, чтобы собрать все компоненты модуля и экспортировать их. К сожалению, это выглядит так:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

Так что я могу хорошо импортировать его из других мест, как это:

import { Comp1, Comp2, Comp3 } from './components';

Очевидно, что это не очень хорошее решение, поэтому мне было интересно, есть ли другой способ. Кажется, я не могу экспортировать импортированный компонент напрямую.

MoeSattler
источник
Возможные дубликаты модулей импорта из файлов в каталоге
Inanc Gumus

Ответы:

369

Вы можете легко реэкспортировать импорт по умолчанию:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

Также есть предложение для ES7 ES8 , которое позволит вам написать export Comp1 from '…';.

Берги
источник
2
Смотрите также похожие образцы здесь и здесь
Bergi
6
В дополнение к предложению ES8 вы можете использовать генерацию кода для поддержки индексных файлов. Взгляните на github.com/gajus/create-index и github.com/ryardley/indexr .
Gajus
@Bergi Итак, эти 3 строки выполняют импорт и экспорт? Или это просто экспорт, но вам больше не нужно возиться с именем Comp1_ и т. Д.?
musicformellons
@musicformellons Они напрямую экспортируются из ссылочного модуля, да.
Берги
2
@amann Круговая ссылка сама по себе неплоха, но может привести к проблемам в зависимости от того, что делает модуль. Несмотря на это, я думаю, что вы должны использовать этот шаблон только в индексном файле вашей библиотеки для экспорта всех компонентов, и если у вас есть межмодульные зависимости, вы должны импортировать их напрямую, а не импортировать деталь из большого. При этом циклические ссылки не вводятся этим шаблоном.
Берги
56

Также имейте в виду, что если вам нужно экспортировать несколько функций одновременно, например, действия, которые вы можете использовать

export * from './XThingActions';
GM
источник
14
Да. К сожалению, это принимает только именованные экспорты, то есть не включает экспорт по умолчанию.
ArneHugo
получить меня (довольно вводит в заблуждение ... заняло у меня время) SyntaxError: Unexpected reserved word, принятый ответ @ Берги работает.
Фрэнк
Вы также можете назвать экспорт по умолчанию, чтобы обойти эту проблему. И ваши действия не должны иметь экспорт по умолчанию, поэтому это решение работает хорошо.
Барри Майкл Дойл
2
Лучшая практика - не использовать экспорт по умолчанию в JavaScript, ненужный дополнительный синтаксис. @GM имеет лучший ответ на эту тему для современного JavaScript.
Миббит
39

Слишком поздно, но я хочу поделиться тем, как я это решаю.

Наличие modelфайла, который имеет два имени экспорта:

export { Schema, Model };

и имеющий controllerфайл, который имеет экспорт по умолчанию:

export default Controller;

Я выставил в indexфайле таким образом:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

и при условии, что я хочу импортировать все из них:

import { Schema, Model, Controller } from '../../path/';
Хавьер Агила
источник
Работает ли это, когда вы импортируете функцию, а затем экспортируете ее обратно? Я пытался, но это не так.
Афтаб Навид
Извините, это действительно сработало, я пропал / на моем пути.
Афтаб Навид
14

Просто:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

Или по именам функций:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

пиров
источник
1

Установить @babel/plugin-proposal-export-default-fromчерез:

yarn add -D @babel/plugin-proposal-export-default-from

В вашем .babelrc.jsonили любом из типов файлов конфигурации

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

Теперь вы можете exportпрямо из file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

Удачи...

Акаша
источник
Как это сделать для Create-React-App без извлечения?
Негин Басири