Tùy chọn xuất mô-đun javascript + ES6


82

Tôi đã thấy việc xuất công khai các mô-đun ES6 được thực hiện theo cả hai cách sau:

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };
  1. Cả hai đều hợp lệ?
  2. Nếu vậy, tại sao cả hai đều tồn tại?
  3. Có các tùy chọn hợp lệ khác để xuất mô-đun bằng cú pháp ES6 không?

Tôi ngạc nhiên là tôi không thể tìm thấy câu trả lời với googlefu của mình. Tôi chỉ quan tâm đến các mô-đun ES6, không phải CommonJS, RequestJS, AMD, Node, v.v.


2
Tôi nghĩ sự khác biệt là import x from yso vớiimport {x} from y
elclanrs

Câu trả lời:


180

Một năm và một vài năm sau, đây là thông tin tốt nhất mà tôi tìm thấy về chủ đề này.

Có 4 loại hàng xuất khẩu. Dưới đây là các ví dụ sử dụng của từng loại, cùng với một số nhập sử dụng chúng:

Xuất cú pháp

// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

Nhập cú pháp

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";

// just import
import "foo";

Nguồn.


9
Danh sách tuyệt vời, nhưng bạn có thể mở rộng về chức năng của từng loại và sự khác biệt là gì không?
Dan Dascalescu

2
Đó là một ý tưởng tuyệt vời. Tôi muốn toàn diện với từng lời giải thích, nhưng tôi đã không chạm vào ES6 trong một thời gian ngắn nên tôi hơi khó hiểu. Sẽ phải đợi cho đến khi tôi trở lại vùng đất ES6 để tôi có thể chắc chắn về những gì tôi đang nói.
kdbanman

bạn là người tốt nhất
zok

40

Cả hai điều này đều hợp lệ.

Phương pháp 1 cung cấp các xuất khẩu được đặt tên . Chìa khóa ở đây là bạn có thể xuất nhiều hơn một thứ. Điều này nên được sử dụng thay vì xuất một đối tượng có nhiều thuộc tính. Khi bạn nhập một mô-đun với các xuất được đặt tên, hãy sử dụng import {a, b} from c.

Phương pháp 2 cung cấp xuất mặc định . Chỉ có thể có một lần xuất mặc định. Điều này chủ yếu được sử dụng khi bạn đang xuất một thứ, như một classhoặc một đơn functionmà bạn muốn được sử dụng mà không cần bất kỳ hỗ trợ bổ sung nào. Khi bạn nhập một mô-đun với xuất mặc định, hãy sử dụng import d from c.

Lưu ý rằng bạn có thể sử dụng cả hai! vì vậy nếu bạn có một chức năng chính, chính với một số ít người trợ giúp thỉnh thoảng được sử dụng, bạn có thể exportlà người trợ giúp và export defaultchức năng chính. Khi bạn nhập một mô-đun và cần cả hai loại xuất, hãy sử dụng import d, {a, b} from c.

Một lựa chọn khác là bạn có thể được đặt tên là kim ngạch xuất khẩu bằng cách liệt kê chúng ở phần cuối của mô-đun của bạn, giống như vậy: export {a,b,c}. Bạn cũng có thể đổi tên chúng export {a as $a, b as c}.

Tôi có tất cả những điều này từ bài viết này , đây là nguồn tốt nhất để cập nhật thông tin mô-đun es6 mà tôi có thể tìm thấy.


3
  1. Cả hai đều hợp lệ?

Không, export function () { return answer; };không hợp lệ, bạn sử dụng mặc định hoặc bạn thêm tên vào khai báo hàm đó.

  1. Nếu vậy, tại sao cả hai đều tồn tại?

Họ không :)

  1. Có các tùy chọn hợp lệ khác để xuất mô-đun bằng cú pháp ES6 không?

Bạn có thể xem rất nhiều tùy chọn hợp lệ tại đây: https://github.com/eslint/espree/pull/43

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.