通过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";

但是还没有添加示例来帮助区分某些示例，它们的示例也含糊不清。

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

有何不同

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

他们给的解释：

  

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

根据上述语法：import "module-name";

第二：

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

此外，如果我们有多个需要导出的功能

function abc1 () {
}

function abc2 () {
} 

这是导出的正确方法吗？

export abc1;
export abc2; 

然后，如果我们导入，如何将变量附加到该变量上？是这样的语句出现的地方吗？

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 --experimental-modules some-importer.mjs命令在node.js v9.11.1中测试过的情况：

---

导入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";

仅已标识的导出可用，并且仅为已标识的别名：

• 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();