ES6, 가져온 모듈을 한 줄로 내보내려면 어떻게해야합니까?


답변:


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

Module내보내기를 수행하는 모듈 내에서 사용할 필요가없는 한 표준 ES6 방식 입니다.

export Module from './Module/Module';

제안 된 ESnext 방법이지만 지금은 Babel에서 활성화 한 경우에만 작동합니다.


그러나 훌륭하게 작동했지만 Webpack이 이것을 좋아하지 않는 것처럼 보이며 component현재 읽기 전용이며 핫 리로딩 할 수 없다는 알림을 제공합니다 . 아주 이상한!
Detuned

완벽합니다. 이것은 허용되는 대답이어야합니다. (웹팩 핫 리로드가 그 도구를 좋아하지 않거나 HMR 플러그인에 문제가있는 경우)
Benja

18
바벨 플러그인이 무엇인지 궁금하신 분은 export-extensions여기에 있습니다 -babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth 위의 내용을 기본값으로 내보내는 방법이 있습니까?
lycuid

4
@ abhishek - KDM export { default as default } from또는export { default } from
loganfsmyth

25

나는 이유를 모르지만 이것이 나를 위해 작동합니다.

components / 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가 아님)에서 작동합니다. 내 '순수한'구성 요소에 HOC를 적용하지 않는 index.js 파일에서 이것을 사용합니다
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

옳은. Babel 6에서 commonJS 및 es6 가져 오기 / 내보내기를 혼합하면 중단됩니다. Babel5는이 잘못된 동작을 허용 / 강화했습니다. 당신의 예에서, Component더 이상 내 보낸 구성 요소에 대한 참조 수 없습니다, 대신 인스턴스의 참조에 살고으로, 객체가 될 것이다Component.default
스콧 실비

아무도 사용하지 않고 이것을하는 방법을 알고 module.exports있습니까? 여러 구성 요소를 하나에 패키징하는이 방법을 좋아 index.js하지만 구문을 파악할 수 없습니다. import x from 'x'; import y from 'y'; export default {x, y};다음 import {x} from xy;작동하지 않습니다 (내가 왜 알아낼 수 없습니다)
알렉스 맥밀란

2
알렉스, export {x, y}대신 해봤 어 ?
jtompl

이 대답은 es6가 아닙니다. EcamScript가 아닌 플랫폼입니다. -1
rektide
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.