Tôi hiện đang sử dụng ES6 trong ứng dụng React qua webpack / babel. Tôi đang sử dụng các tệp chỉ mục để thu thập tất cả các thành phần của một mô-đun và xuất chúng. Thật không may, nó trông như thế này:

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_;

Vì vậy, tôi có thể nhập nó độc đáo từ những nơi khác như thế này:

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

Rõ ràng đó không phải là một giải pháp rất hay, vì vậy tôi đã tự hỏi, liệu có cách nào khác không. Tôi dường như không thể xuất khẩu thành phần nhập khẩu trực tiếp.

Bạn có thể dễ dàng xuất lại nhập mặc định:

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

Ngoài ra còn có một đề xuất cho ES7 ES8 sẽ cho phép bạn viết export Comp1 from '…';.

Ngoài ra, hãy nhớ rằng nếu bạn cần xuất nhiều chức năng cùng một lúc, như các hành động bạn có thể sử dụng

export * from './XThingActions';

Quá muộn nhưng tôi muốn chia sẻ cách mà tôi giải quyết nó.

Có modeltệp có hai xuất khẩu được đặt tên:

export { Schema, Model };

và có controllertệp có xuất mặc định:

export default Controller;

Tôi tiếp xúc trong indextập tin theo cách này:

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

export { Schema, Model, Controller };

và giả sử rằng tôi muốn nhập tất cả chúng:

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

Đơn giản:

// 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'

Hoặc theo tên hàm:

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

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

Thêm thông tin: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Cài đặt @babel/plugin-proposal-export-default-fromqua:

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

Trong .babelrc.jsonhoặc bất kỳ loại tệp cấu hình nào của bạn

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

Bây giờ bạn có thể exporttrực tiếp từ một file-path:

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

Chúc may mắn...