ES6 導入場景

Question

導入模塊有多種方式。 import {House}和import House什么區別？

Answer 1

基於導出選項，在 ES6 模塊中有兩種導入方式。

1. 命名導入

//filename - simple.js

export function Simple() {}

import {Simple} from "./simple.js"

2. 默認導入

//filename - simple.js
export default Class Simple {}


import Simple from "./simple.js"

有關更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

更新您還可以從單個文件導出並導入它們。 這里的重要警告是一個模塊中只能有一個默認導出。

//filename - simple.js

export function Simple1() {}
export default function Simple2() { }

import Simple2, { Simple1 } from "./simple.js"

Answer 2

語法import {House}用於導入特定的命名導入，例如import {foo, bar} from '/modules/my-module.js';

而語法import House用於導入默認導出，例如import myDefault from '/modules/my-module.js';

可以看出，我們可以將這兩者混合使用。 例如，這也是一個有效的 import import myDefault, {foo, bar} from '/modules/my-module.js';

閱讀更多結帳Mozilla 開發人員指南。