ES6, как вы можете экспортировать импортированный модуль в одну строку?


107

Я бы хотел сделать следующее, но, если возможно, в одну строку:

  • import Module from './Module/Module;'
  • export Module;

Я пробовал следующее, но похоже, что это не работает:

  • export Module from './Module/Module;

Ответы:


196
export {default as Module} from './Module/Module';

- это стандартный способ ES6, если вам не нужно Moduleбыть доступным внутри модуля, выполняющего экспорт.

export Module from './Module/Module';

- это предлагаемый ESnext способ сделать это, но он работает, только если вы пока включили его в Babel.


Он работал отлично, однако похоже, что Webpack это не нравится, поскольку он уведомляет о том, что componentтеперь он доступен только для чтения и не может быть перезагружен. Очень странно!
Расстроен

отлично, это должен быть принятый ответ. (если горячая перезагрузка webpack не нравится, это проблема в этом инструменте или в плагине HMR.)
Benja

18
Если кому-то интересно, что это за плагин babel, то он export-extensionsздесь - babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth есть ли способ экспортировать указанное выше по умолчанию?
lycuid

4
@ abhishek-kdm export { default as default } fromorexport { default } from
loganfsmyth

25

Не знаю почему, но у меня это работает:

компоненты / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

Я импортирую экспорт следующим образом:

import {Component, Component2, Component3, Component4} from '../components';

23

Обратите внимание, что вы также можете повторно экспортировать все из модуля:

export * from './Module/Module';

Этот синтаксис с подстановочными знаками будет работать только с файлами с именованным экспортом. Если файл имеет только один экспорт по умолчанию, вы получите сообщение об ошибке «В модуле нет именованных экспортов».
dmbaughman

12

Для компонентов React Native у меня работает этот синтаксис:

export {default} from 'react-native-swiper';

Это работает для меня для React (не для Native), когда я хочу повторно экспортировать импортированный файл по умолчанию. Я использую это в файлах index.js, которые не применяют HOC к моим «чистым» компонентам
Шираз

-1

Итак, я обнаружил, что это очень хорошо работает для функции немедленного экспорта, имея index.jsв корне componentsкаталога для удобства ссылки:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

Вам нужно использовать module.exports.


3
Имейте в виду, что, поскольку это частично модули CommonJS, это будет работать только в Babel и потерпит неудачу, если вы попытаетесь использовать его в реальном модуле ES6, как только они поддерживаются в большем количестве сред, и, вероятно, перестанут работать в будущих версиях Вавилон.
loganfsmyth

Верный. Перемешивание импорта / экспорта commonJS и es6 в Babel 6 прерывается. Babel5 разрешил / усилил это некорректное поведение. В вашем примере Componentэто больше не будет ссылкой на ваш экспортированный компонент, а вместо этого будет объект со ссылкой на ваш экземплярComponent.default
Скотт Сильви

Кто-нибудь знает, как это сделать без использования module.exports? Мне нравится этот метод упаковки кучи компонентов в файл, index.jsно я не могу понять синтаксис. import x from 'x'; import y from 'y'; export default {x, y};то import {x} from xy;не работает (и я не могу понять, почему нет)
Alex McMillan

2
Алекс, ты пробовал export {x, y}вместо этого?
jtompl

Это не es6. Это не платформа EcamScript. -1
ректид
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.