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.