ES6, làm cách nào bạn có thể xuất một mô-đun đã nhập trong một dòng?


107

Tôi muốn những điều sau đây nhưng với một dòng duy nhất, nếu có thể:

  • import Module from './Module/Module;
  • export Module;

Tôi đã thử những cách sau nhưng dường như không hoạt động:

  • export Module from './Module/Module;

Câu trả lời:


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

là cách tiêu chuẩn của ES6, miễn là bạn không cần phải Modulecó sẵn bên trong mô-đun thực hiện việc xuất.

export Module from './Module/Module';

là một cách ESnext được đề xuất để làm điều đó, nhưng điều đó chỉ hoạt động nếu bạn đã bật nó trong Babel ngay bây giờ.


Nó hoạt động rất tốt, tuy nhiên, có vẻ như Webpack không thích điều này, đưa ra thông báo rằng componentnó hiện ở chế độ chỉ đọc và không thể tải lại nóng. Rất lạ!
Bị phát hiện

hoàn hảo, đây phải là câu trả lời được chấp nhận. (nếu webpack tải lại nóng không giống như đó là một vấn đề trong công cụ đó hoặc nó plugin của HMR.)
Benja

18
Nếu bất cứ ai đang băn khoăn mà babel Plugin nó là, nó là export-extensionsở đây - babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth có cách nào để xuất ở trên làm mặc định không?
lycuid

4
@ abhishek-kdm export { default as default } fromhoặcexport { default } from
loganfsmyth

24

Tôi không biết tại sao nhưng điều này phù hợp với tôi:

component / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

Tôi nhập các bản xuất như thế này:

import {Component, Component2, Component3, Component4} from '../components';

23

Xin lưu ý rằng bạn cũng có thể xuất lại mọi thứ từ một mô-đun:

export * from './Module/Module';

Cú pháp ký tự đại diện này sẽ chỉ hoạt động trên các tệp có bản xuất được đặt tên. Nếu tệp chỉ có một lần xuất mặc định, bạn sẽ gặp lỗi "Không tìm thấy tệp xuất có tên nào trong mô-đun".
dmbaughman

12

Đối với các thành phần React Native, cú pháp này phù hợp với tôi:

export {default} from 'react-native-swiper';

Điều này phù hợp với tôi đối với React (không phải Native) khi tôi muốn xuất lại một mặc định đã nhập. Tôi sử dụng điều này trong các tệp index.js không áp dụng bất kỳ HOC nào cho các thành phần 'thuần túy' của tôi
Shiraz

-1

Vì vậy, tôi thấy điều này hoạt động khá tốt cho chức năng xuất ngay lập tức khi có một thư index.jsmục gốc componentsđể dễ dàng tham khảo:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

Bạn cần sử dụng module.exports.


3
Hãy nhớ rằng vì đây là một phần của mô-đun CommonJS, điều này sẽ chỉ hoạt động cụ thể trong Babel và sẽ không thành công nếu bạn cố gắng sử dụng nó trong một mô-đun ES6 thực sau khi hỗ trợ cho chúng đến trong nhiều môi trường hơn và có thể sẽ ngừng hoạt động trong các phiên bản tương lai của Babel.
loganfsmyth 12/12/16

Chính xác. Xen lẫn nhập / xuất commonJS & es6 trong các ngắt Babel 6. Babel5 đã cho phép / củng cố hành vi không chính xác này. Trong ví dụ của bạn, Componentsẽ không còn có một tham chiếu đến thành phần xuất khẩu của bạn, nhưng thay vào đó sẽ là một đối tượng, có sự tham khảo ví dụ bạn sống trênComponent.default
Scott Silvi

Có ai biết làm thế nào để làm điều này mà không cần sử dụng module.exports? Tôi thích phương pháp đóng gói một loạt các thành phần vào một index.jsnhưng không thể tìm ra cú pháp. import x from 'x'; import y from 'y'; export default {x, y};sau đó import {x} from xy;không hoạt động (và tôi không thể tìm ra lý do tại sao không)
Alex McMillan

2
Alex, bạn đã thử export {x, y}thay thế chưa?
jtompl

Câu trả lời này không phải là es6. Đó là một nền tảng không phải EcamScript. -1
rektide
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.