javascript - es6 export 的一個理解問題

Question

各位鄉親，在看阮一峰老師的 es6入門教程的時候，有一段看了多次也沒有理解

需要特別注意的是，export指令規定的是對外的接口，必須與模組內部的變數建立一一對應關係。

// 报错
export 1;

// 报错
var m = 1;
export m;

上面兩種寫法都會報錯，因為沒有提供對外的介面。第一種寫法直接輸出1，第二種寫法透過變數m，還是直接輸出1。1只是一個值，不是介面。正確的寫法是下面這樣。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

上面三種寫法都是正確的，規定了對外的介面m。其他腳本可以透過這個接口，取到值1。它們的實質是，在介面名與模組內部變數之間，建立了一一對應的關係。

在這裡這個「介面」到底指的是什麼？
對於

// 报错
function f() {}
export f;

// 正确
export function f() {};

差別到底在哪裡？

Answer 1

你不妨直接看一看文法是如何規定的：

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

export expression;
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

取自 https://developer.mozilla.org...

ta說的介面就是 expression 即表達式，用通俗的話說就是不是常數（固定值）的那麼一種東西。

另外，你可以用default這樣寫：

export default m = 1

因為 m = 1 是一个表达式。其它地方你可以直接 import m from ... 那麼 m 的值就是1.