从 MDN 文档导入 ES6 中的语句

Question

我正在通过Firefox import statements.

他们已经展示了某些像这样的导入语句

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

但没有添加示例来帮助区分某些人，他们的示例也有点模糊。

从文档中，有很多事情对我来说没有意义.. 例如 name 与 defaultExport

有何不同

虽然默认导出对我来说确实有意义，但名称的定义有点难以理解

他们给出的解释：

name 参数是“模块对象”的名称，它将被 用作一种命名空间来引用导出。

从上面的语法：import "module-name";

第二个：

import { export as alias } from "module-name";

另外，假设我们有多个函数需要导出

function abc1 () {
}

function abc2 () {
} 

这会是正确的导出方式吗？

export abc1;
export abc2; 

然后如果我们导入，我们如何将变量附加到它？这是这样的 where 语句进来的吗？

import { export as alias } from "module-name";

Answer 1

鉴于此模块module-name：

// module-name.js
export default function foo(){ console.log("foo");}
export function bar(){ console.log("bar");}
console.log("hello world");

考虑以下已在 node.js v9.11.1 中使用命令node --experimental-modules some-importer.mjs 测试的案例：

---

导入default export

// import defaultExport from "module-name";
import fizzbuzz from "module-name";

因此只有默认导出可用：

• fizzbuzz（即foo）可用
• bar不可用
• console.log(hello world) 将会运行

---

使用* 通配符导入所有导出

import * as name from "module-name";

所有导出都可用，但附加到标识为 name 的对象：

• foo不可用
• bar不可用
• name.foo不可用（尽管您认为会）
• name.bar 可用
• console.log(hello world) 将被运行

---

导入已识别的导出

// import { export } from "module-name";
import { bar } from "module-name"

只有已识别的导出可用：

• foo不可用
• bar 可用
• console.log(hello world) 将被运行

---

将已识别的导出导入为别名

// import { export as alias } from "module-name";
import { bar as mybar } from "module-name";

只有标识的导出可用并且只有 as 标识的别名：

• foo不可用
• bar不可用
• mybar（即bar）可用
• console.log(hello world) 将被运行

---

导入default export 并使用* 通配符

// import defaultExport, * as name from "module-name";
import fizzbuzz, * as name from "module-name";

模块中的默认项可以引用为defaultExport，所有其他导出的项都附加到name

• fizzbuzz（即foo）可用
• bar不可用
• name.bar 可用
• console.log(hello world) 将被运行

---

没有实际识别的进口

import "module-name";

模块已加载，但导入的模块中实际上没有可用的内容。这意味着文件运行但什么都没有暴露

• foo不可用
• bar不可用
• console.log(hello world) 将被运行

Answer 2

name 与 defaultExport 有何不同？

name 是一个对象，它将所有导出的值保存为导出的键/值，默认导出除外，它将位于defaultExport 中。如果您要从文件中导出以下内容：

export default function main() {}
export function helper1() {}
export function helper2() {}

然后你可以导入main作为默认导入：

import main from "file";

这不会导入助手。为此，您将使用* as:

import * as helpers from "file";
helpers.helper1();

然后如果我们导入，我们如何将变量附加到它？

它们附加到与导出时相同的名称，因此只导入上述帮助器之一：

import { helper1 } from "file";
helper1();

如果您想重命名该导入，因为它具有误导性/冲突性，那么 as 语法就会出现：

import { helper1 as someOther } from "file";
someOther();