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

Question

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

方法1：

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

方法2：

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

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

参考文档：https://babeljs.io/docs/learn-es2015/

Answer 1

模块可以导出多个东西。模块也可以有一个“默认”导出。

import exp from "somelib";

这会将somelib的默认导出分配给变量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等。

这是该主题的非常好的资源：http://www.2ality.com/2014/09/es6-modules-final.html

Answer 2

在这种情况下，exp是要导入的default模块，名为exp。 pi和e用大括号括起来，因为它们没有默认值。

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

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

导入没有大括号，无论你想要什么，都可以命名：

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