Tuyệt vời Muglys! Điều này là khó khăn hơn nó cần phải được.
Xuất một mặc định phẳng
Đây là một cơ hội tuyệt vời để sử dụng lây lan ( ...ở { ...Matters, ...Contacts }bên dưới:
// imports/collections/Matters.js
export default { // default export
hello: 'World',
something: 'important',
};
// imports/collections/Contacts.js
export default { // default export
hello: 'Moon',
email: 'hello@example.com',
};
// imports/collections/index.js
import Matters from './Matters'; // import default export as var 'Matters'
import Contacts from './Contacts';
export default { // default export
...Matters, // spread Matters, overwriting previous properties
...Contacts, // spread Contacts, overwriting previosu properties
};
// imports/test.js
import collections from './collections'; // import default export as 'collections'
console.log(collections);
Sau đó, để chạy mã biên dịch babel từ dòng lệnh (từ dự án root /):
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
(trimmed)
$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'Moon',
something: 'important',
email: 'hello@example.com' }
Xuất một mặc định giống như cây
Nếu bạn không muốn ghi đè các thuộc tính, hãy thay đổi:
// imports/collections/index.js
import Matters from './Matters'; // import default as 'Matters'
import Contacts from './Contacts';
export default { // export default
Matters,
Contacts,
};
Và đầu ra sẽ là:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
Contacts: { hello: 'Moon', email: 'hello@example.com' } }
Xuất nhiều tên xuất khẩu không có mặc định
Nếu bạn dành riêng cho DRY , cú pháp nhập cũng thay đổi:
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
Điều này tạo ra 2 xuất khẩu có tên không có xuất khẩu mặc định. Sau đó thay đổi:
// imports/test.js
import { Matters, Contacts } from './collections';
console.log(Matters, Contacts);
Và đầu ra:
$ npx babel-node --presets @babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
Nhập khẩu tất cả xuất khẩu có tên
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
// imports/test.js
// Import all named exports as 'collections'
import * as collections from './collections';
console.log(collections); // interesting output
console.log(collections.Matters, collections.Contacts);
Lưu ý sự phá hủy import { Matters, Contacts } from './collections'; trong ví dụ trước.
$ npx babel-node --presets @babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello@example.com' }
Trong thực tế
Cho các tệp nguồn này:
/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js
Tạo một /myLib/index.jsgói để tất cả các tệp đánh bại mục đích nhập / xuất. Việc tạo mọi thứ toàn cầu ở nơi đầu tiên sẽ dễ dàng hơn so với làm mọi thứ toàn cầu thông qua nhập / xuất thông qua "tệp bao bọc" của index.js.
Nếu bạn muốn một tập tin cụ thể, import thingA from './myLib/thingA';trong các dự án của riêng bạn.
Tạo một "tệp bao bọc" với xuất khẩu cho mô-đun chỉ có ý nghĩa nếu bạn đóng gói cho npm hoặc trong một dự án nhiều nhóm.
Làm cho nó đến nay? Xem các tài liệu để biết thêm chi tiết.
Ngoài ra, yay cho Stackoverflow cuối cùng cũng hỗ trợ ba `s dưới dạng đánh dấu hàng rào mã.