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 '...';

왜 반출을 하시겠습니까?
omarjmh

당신은 할 수 export {React}당신이 어딘가에 반작용 필요하다면 그러나 다시, 당신은 단지 거기를 가져와야합니다.
loganfsmyth

2
내보내기 반응은 단지 예일뿐입니다. 실제로 사용자가 일부 객체를 더 짧은 고수준 경로로 가져올 수 있도록 일부 프로젝트를 구성하고 싶습니다.
Yao Zhao

그 업데이트에 감사드립니다. ES6 / 7과 관련된 모든 문제를 해결했습니다. 이것을 답변으로 추가하고 수락하는 것이 좋습니다.
Florian Wendelborn

12
export * as name1 from '...';이것은 나를 위해 작동하지 않습니다 (webpack 2 사용). 어떤 아이디어?
엔티티 블랙

답변:


131

여러 파일을 구성하는 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

36

그런 구조로 가져온 파일을 내보낼 수 있습니다

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

2

유스 케이스의 경우 babel이 es7 코드를 es5로 변환 할 수 있도록 명시적인 import 문이 명시 적으로 필요합니다.

다음과 같은 오류가 발생합니다 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


그것은 그 질문에 관한 것이 아닙니다.
Dan Dascalescu

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.