Как экспортировать импортированный объект в ES6?

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

например:

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

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

Ответ 1

Я часто делаю следующее в файлах index.js, которые составляют несколько файлов:

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

Эта запись в блоге содержит некоторые дополнительные дополнительные примеры.

Важное примечание

Вы должны знать это правило eslint при доступе к этим экспортированным импортам. В принципе, в другом файле вы не должны:

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

Вы должны сделать это:

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

Ответ 2

Вы можете экспортировать импортированный файл с такой структурой

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

Ответ 3

Вы можете сделать export {React} и импортировать его через import {React} from ./module

Подробнее см. https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export.

Ответ 4

Учитывая ./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

Ответ 5

Для моего случая использования мне явно нужны какие-то явные операторы import, чтобы babel могла перенести мой код es7 в es5.

Следующие результаты приводят к ошибке. You gave us a visitor for the node type "ForAwaitStatement" but it 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;

Ответ 6

Вот как я сделал, чтобы организовать мои статические файлы изображений. Я создал новый файл под названием "Directory.js".

const asset = {
    icon: {
        artist: require('./icon/artist.png'),
        artists: require('./icon/artists.png'),
        bookmark: require('./icon/bookmark.png'),
        cameraFlip: require('./icon/camera-flip.png')
    },
    image: {
        color: require('./image/color.png'),
        posting: require('./image/posting.png'),
        newSchool: require('./image/new-school.png'),
        traditional: require('./image/traditional.png')
    }
}

export default asset;

А вот и импорт.

import asset from './../asset/Directory';

// usage in react native
<Image source={asset.icon.posting} />

Надеюсь, это помогло!