Named Exports

// module1.js
export const name = 'Ben';

// app.js
import { name } from './module1.js'
console.log(name);
// Ben

// module1.js
const name = 'Ben';
export { name };

// app.js
import { name } from './module1.js'
console.log(name);
// Ben

通過觀察上面的代碼我們發現，該方式導出的模塊內容，必須用解構的方式訪問，也就是無法直接用module1.name這樣的方式訪問。

Default Exports

Default Exports的導出方式，剛好可以補充Named Exports的對象訪問方式。

// module1.js
const name = 'Ben';
export default {
    name
};

// app.js
import module1 from './module1.js'
console.log(module1.name);
// Ben

其它

對於Named Exports的導出方式，如果非要使用對象的訪問方式，則可以使用* as xxx語法，將模塊中所有Named Exports導出的數據合併為一個對象，來達到目的。

// module1.js
export const name = 'Ben';

// app.js
import * as obj from './module1.js'
console.log(obj.name);
// Ben