ES6导入方案

Question

有多种导入模块的方法。import {House}和import House有什么区别？

​

​

Answer 1

根据导出选项，在ES6模块中有两种导入方式。

1. Named导入

//filename - simple.js

export function Simple() {}

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

1. Default导入

//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 myDefault, {foo, bar} from '/modules/my-module.js';

阅读更多的结账Mozilla developer guide。