ES6 Module 語法學習總結

本文所用的示例代碼在這裏

• ES6的Module加載是編譯時加載，也就是說在代碼運行以前就把各個模塊的引用關係肯定了。所以沒法在運行時再去決定是否加載模塊，從哪裏加載模塊，以及加載模塊的哪一個部分。
• ES6模塊的加載與Nodejs的模塊加載不一樣，ES Module模塊的加載是對模塊的引用，所以當模塊導出的變量值變化以後，模塊的引入方也會受到影響。

export

模塊的導出其實是導出一個對外的接口，能夠通俗地理解爲把這段代碼共享出來，給其餘模塊使用。 一個模塊導出能夠有如下方式：

export const a = 5;
export class A {}
export function b() {}
const c = 'my export name is default';
export default c; // 將 c 重命名爲 default
複製代碼

以上語法與下面的語法等價:

const a = 5;
class A {}
function b() {}
const c = 'my export name is default';
// 統一導出
export {
	a,
  A,
  b,
  c as default // 將 c 重命名爲 default
};
複製代碼

import

對於上述幾種導出方式，對應的引入方式爲

import { a as renameA, A, b, default as d } from './module';
複製代碼

還能夠全量加載

import * as module1 from './module';
// 若是隻是想執行所引用的模塊中的代碼，而不使用它，能夠這樣
import * from './module'
複製代碼

export default 導出默認模塊

前面的代碼裏有 export default c 這樣的代碼，實際上是導出了一個默認的輸出內容，這樣能夠方便其餘模塊加載。

// module.js
const c = 'this is default content';
export default c

// index.js
import anyName from './module';
console.log(anyName); // this is default content
複製代碼

這樣使用，調用方無需知道所引用的模塊中默認的導出內容的名字，便可引入該內容。 而實際上，default 是引入模塊的一個屬性，使用全量引入時，它被包含在引入的變量中。

// module.js
const c = 'this is default content';
export default c;

// index.js
import * as module1 from './module';
console.log(module1.default); // this is default content
複製代碼

使用 as 重命名

使用as能夠對導出或者導入的內容進行重命名。

// 導出重命名
const a = 'My name is a, but i am renamed newA';
export { a as NewA };

// 導入重命名
import { newA as newNewA } from "./module2";
console.log(newNewA);
複製代碼

export 與 import複合使用

如下示例代碼中均使用 module1.js ,

// module1.js
export const a = 'a, maybe will be rename to newA or newNewA';
export class A {}
export function b() { console.log('I am function b'); }
const c = 'my export name is default';
export default c; // 將 c 重命名爲 default
複製代碼

普通導入導出使用以下。

// module2.js
export { a, A, b } from './module1';

// index.js
import { a, A } from './module2';
複製代碼

導出時重命名:

// module2.js
export { a as newA, A, b } from './module1';

// index.js
import { newA, A } from './module2';
複製代碼

全量導出。

// module2.js
export * from "./module1";

// index.js
import * as module2 from './module2';
console.log(module2);
// b: function b() {}
// a: "a, maybe will be rename to newA or newNewA"
// A: function A() {}
複製代碼

注意，使用 export * 全量導出時，導出的內容不包含 default 。

導出 default :

// module2.js
export { default } from "./module1";

// index.js
import { default as newDefault } from "./module2";
console.log(newDefault);
複製代碼

語雀連接