Як експортувати імпортований об’єкт у ES6?


244

Випадок використання простий: я просто хочу експортувати об’єкт з назвою так само, як це було імпортовано.

наприклад:

import React from 'react';
export React;

але це не працює. Я повинен написати:

import React from 'react';
export const React = React;

Але це дивно. Який правильний спосіб це зробити?

ОНОВЛЕНО :

Дякуємо за допомогу та посилання. Я вирішив свою проблему багатьма підказками. Я хотів би поділитися деякими загальними для мене випадками та рішеннями.

експортний імпорт

import d, {obj} from '...';

export {obj, d};
export {obj as name1, d as name2};

реекспорт всього названого імпорту

export * from '...';
export * as name1 from '...';

реекспорт деякого названого імпорту

export {a, b as name1} from '...';

реекспорт імпорту за замовчуванням як експорт за замовчуванням

export {default} from '...';

реекспорт імпорту за замовчуванням як ім'я експорту

export {default as name1} from '...';

чому б ви реагували на експорт?
омарім

ви можете, export {React}але знову ж таки, якщо вам потрібно десь реагувати, просто імпортуйте його туди.
loganfsmyth

2
реагування на експорт - лише приклад. Насправді я хочу організувати якийсь проект, щоб користувач міг імпортувати якийсь об'єкт у коротший та високий шлях.
Яо Чжао

Дякую вам за це оновлення. Це вирішило кожну проблему з ES6 / 7. Я пропоную вам додати це як відповідь і прийняти його.
Флоріан Вендельборн

12
export * as name1 from '...';це не працює для мене (використовуючи webpack 2). Будь-які ідеї?
Entity Black

Відповіді:


131

У файлах index.js я часто складаю наступне:

export {default as SomeClass} from './SomeClass';
export {someFunction} from './utils';
export {default as React} from 'react';

Цей запис у блозі містить декілька приємних додаткових прикладів.

Важлива примітка

Ви повинні знати про це правило, коли отримуєте доступ до експортованого імпорту. В основному, в іншому файлі ви не повинні:

import SomeClassModule from 'SomeClass/index.js';
SomeClassModule.someFunction(); // Oops, error

Ви повинні зробити це:

import SomeClassModule, {someFunction} from 'SomeClass/index.js';
someFunction(); // Ok

36

Ви можете експортувати імпортований файл із такою структурою

import First from './First'
import Second from './Second'
/..../
export { First, Second }

2

У моєму випадку використання мені явно потрібна якась явна заява про імпорт, щоб babel міг передати мій es7-код на es5.

Наступні результати призводять до помилки You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type:

require( 'babel-core/register' ); //transpiles es7 to es5
export {default} from './module_name'

Моє рішення полягало в явному імпорті модуля, використовуючи require():

require( 'babel-core/register' );
export default require( './module_name' ).default;

-1

Подано ./foo.js:

const Foo = class {
  talk() { return 'hello'; }
};

export default Foo;

Тоді ви повинні мати можливість це зробити:

import Foo from './foo';

let foo = new Foo();

foo.talk(); // => 'hello';

Синтаксис більш-менш відповідає шаблону commonjs module.exports, де ви це зробите:

const Foo = class {

};

module.exports = Foo;

Більше тут:

http://exploringjs.com/es6/ch_modules.html


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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.