通過一系列文件了解ES6中的導入/導出

Question

當我有3個文件時，我在理解導出/導入機制時遇到了一些麻煩，每個文件都包含前一個文件。

例：

//fileA.js:
export default MyClass {}

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';

我的期望是，然后在fileC中可以使用MyClass ，但看起來情況並非如此。 你能建議嗎？

Answer 1

如下所示：

//fileA.js:
export default MyClass {}

//fileB.js:
export { default as MyClass } from './fileA'

//fileC.js:
import { MyClass } from './fileB'

Answer 2

導入這樣的模塊時：

//fileC.js:
import './fileB.js';

它實際上並不導入任何值。 它將在該模塊中執行副作用的全局代碼，但不會自己導入值。 為了執行您想要執行的操作，您需要在要使用它們的每個文件中導入模塊值。

Answer 3

在您的以下代碼中：

//fileA.js:
export default MyClass {}

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';

Myclass只能在fileB中使用，因為這是直接導入它。 你的第3行代碼不會加載到fileA中。 僅僅因為在FileB中加載FileA並不意味着當我們在FileC中導入B時依賴性被轉移

為了使其成為可用的，我們必須像在文件B中那樣在文件C中再次導入它：

import MyClass from './fileA.js';

其他`import` `export`語法：

當一個文件導出多個東西（前面沒有默認值）時，我們可以在使用命名導出中導入它，例如：

export class1 {}

export class2 {}

我們正在導出2個類，我們可以使用以下語法導入它們：

import {class1, class2} from './fileA.js';

請記住，在這種情況下，名稱現在必須匹配導出的名稱， class1和class2 。

我們還可以通過以下方式導入文件的所有導出：

import * as classes from './fileA.js';

classes.class1 // the way to access class1

此語法將所有導出放在我們可以確定名稱的對象上（在as關鍵字之后）。 然后，我們可以訪問導出，就像我們通常訪問對象的屬性一樣。