현재 webpack / babel을 통해 React 앱에서 ES6을 사용하고 있습니다. 색인 파일을 사용하여 모듈의 모든 구성 요소를 수집하고 내보내고 있습니다. 불행히도 다음과 같습니다.

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

따라서 다음과 같은 다른 위치에서 멋지게 가져올 수 있습니다.

import { Comp1, Comp2, Comp3 } from './components';

분명히 그것은 좋은 해결책이 아니므로 다른 방법이 있는지 궁금합니다. 가져온 구성 요소를 직접 내보낼 수없는 것 같습니다.

기본 가져 오기를 쉽게 다시 내보낼 수 있습니다.

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

ES7 ES8에 대한 제안 도 있습니다 export Comp1 from '…';.

또한 여러 기능을 한 번에 내 보내야하는 경우 작업과 같이 사용할 수 있습니다.

export * from './XThingActions';

너무 늦었지만 해결 방법을 공유하고 싶습니다.

갖는 model두 개의 명명 수출이 있습니다 파일 :

export { Schema, Model };

와 가진 controller기본 수출이 파일을 :

export default Controller;

index이 방법으로 파일에 노출했습니다 .

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

그리고 내가 그들 모두를 가져오고 싶다고 가정하면 :

import { Schema, Model, Controller } from '../../path/';

간단히:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

또는 함수 이름으로 :

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

추가 정보 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

다음을 @babel/plugin-proposal-export-default-from통해 설치하십시오 .

yarn add -D @babel/plugin-proposal-export-default-from

귀하 .babelrc.json또는 모든 구성 파일 유형

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

이제 다음 export에서 직접 할 수 있습니다 file-path.

export Foo from './components/Foo'
export Bar from './components/Bar'

행운을 빕니다...