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


107

Я хотів би наступного, але, якщо можливо, з одним рядком:

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

Я спробував таке, але, схоже, це не працює:

  • export Module from './Module/Module;

Відповіді:


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

- це стандартний спосіб ES6, якщо вам не потрібно Moduleтакож бути доступним всередині модуля, який здійснює експорт.

export Module from './Module/Module';

це запропонований ESnext спосіб зробити це, але це працює лише в тому випадку, якщо ви його включили в Babel.


Це спрацювало чудово, однак, схоже, Webpack цього не любить, даючи сповіщення про те, що componentфункція тепер доступна лише для читання і не може бути перезавантажена. Дуже дивно!
Затриманий

ідеально, це повинна бути прийнята відповідь. (якщо гаряче перезавантаження веб-пакету не подобається, це проблема в цьому інструменті чи плагін HMR.)
Benja

18
Якщо хтось задається питанням, який це плагін для дітлахів , він export-extensionsтут - babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth Є спосіб експортувати вищезазначене за замовчуванням?
лікуїд

4
@ abhishek-kdm export { default as default } fromабоexport { 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 до моїх "чистих" компонентів
Shiraz

-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

Правильно. Переміщення імпорту / експорту звичайних JS & 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.