这些ES6导入方式有什么区别？

Question

这些导入方式有什么区别？

方法一：

import {sum, pi} from "lib/math";

方法二：

import exp, {pi, e} from "lib/mathplusplus";

es2015 文档展示了这两个例子，我无法弄清楚花括号的用途。似乎导入后列出的所有内容都将分配给 window 对象。

Answer 1

模块可以导出多个东西。模块也可以有单个 "default" 导出。

import exp from "somelib";

这会将 somelib 的 default 导出分配给变量 exp。

import {a, b} from "somelib";

这会将非默认命名导出 a 和 b 分配给局部变量 a 和 b.

import exp, {a, b} from "somelib";

将默认导出分配给 exp，将命名导出分配给 a 和 b。

import * as somelib from "somelib";

获取 somelib 的所有命名导出并将它们作为对象分配给局部变量 somelib，这意味着您将有 somelib.a、somelib.b 等

Answer 2

本例中exp是要导入的default模块，名称为exp。 pi 和 e 是用花括号括起来的，因为它们不是默认的。

在 this 示例中，您定义了一个默认模块：

export default function(x) {
  return x + x;
}

并且 import 没有花括号，随便命名：

import double from 'mymodule';
double(2); // 4

Answer 3

模块可以 export 有两种不同的方式。他们可以使用 default，或者只执行标准 export

export default function exp(value, power) {}
export const pi = 3.14159

当您从模块中 import 时，您需要使用大括号来捕获非默认导出。如果您想要默认导出，则不需要大括号。

import exp, {pi} from "lib/mathplusplus";

What is the difference between these ES6 import methods?