这是默认导入：

// B.js
import A from './A'

它仅在A具有默认导出时才有效：

// A.js
export default 42

在这种情况下，导入时分配给它的名称并不重要：

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

因为它会始终解析到任何的是默认的导出的A。

这是一个名为的命名导入A：

import { A } from './A'

它仅在A包含名为 的命名导出A时才有效：

export const A = 42

在这种情况下，名称很重要，因为您要通过其导出名称导入特定事物：

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

为了使这些工作，你需要添加一个相应的命名导出到A：

// A.js
export const A = 42
export const myA = 43
export const Something = 44

一个module只能有一个默认的 export，但可以有任意数量的命名导出（零、一、二或多）。您可以将它们全部导入：

// B.js
import A, { myA, Something } from './A'

在这里，我们将默认导出导入为A，命名导出分别称为myA和Something。

// A.js
export default 42
export const myA = 43
export const Something = 44

我们还可以在导入时为它们分配不同的名称：

// B.js
import X, { myA as myX, Something as XSomething } from './A'

默认导出往往用于您通常期望从module中获得的任何内容。命名导出往往用于可能很方便但并不总是必要的实用程序。但是，您可以选择如何导出内容：例如，module可能根本没有默认导出。

这是一个很好的 ES module指南，解释了默认导出和命名导出之间的区别。

我想说还有一个import值得一提的ES6 关键字的星号符号。

如果您尝试控制台日志 Mix：

import * as Mix from "./A";
console.log(Mix);

你会得到：

什么时候应该使用花括号进行 ES6 导入？

当您只需要module中的特定组件时，括号是金色的，这使得像 webpack 这样的打包器占用的空间更小。

Dan Abramov 的回答解释了默认的导出和命名的导出。

使用哪个？

引用 David Herman 的话：ECMAScript 6支持单一/默认导出样式，并为导入默认提供了最甜蜜的语法。导入命名导出可以甚至应该稍微不那么简洁。

然而，在 TypeScript 中命名导出由于重构而受到青睐。例如，如果您默认导出一个类并对其重命名，则类名只会在该文件中更改，而不会在其他引用中更改，命名导出类名将在所有引用中重命名。命名导出也是实用程序的首选。

总体使用您喜欢的任何内容。

额外的

默认导出实际上是名称为 default 的命名导出，因此默认导出可以导入为：

import {default as Sample} from '../Sample.js';

如果您import仅将 Node.js module、对象和解构视为语法糖，我会发现它非常直观。

// bar.js
module = {};

module.exports = {
  functionA: () => {},
  functionB: ()=> {}
};

 // Really all that is is this:
 var module = {
   exports: {
      functionA, functionB
   }
  };

// Then, over in foo.js

// The whole exported object:
var fump = require('./bar.js'); //= { functionA, functionB }
// Or
import fump from './bar' // The same thing - object functionA and functionB properties


// Just one property of the object
var fump = require('./bar.js').functionA;

// Same as this, right?
var fump = { functionA, functionB }.functionA;

// And if we use ES6 destructuring:
var { functionA } =  { functionA, functionB };
// We get same result

// So, in import syntax:
import { functionA } from './bar';

ES6module总结：

出口：

您有两种类型的导出：

1. 命名导出
2. 默认导出，每个module最多一个

句法：

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

进口：

导出的类型（即命名或默认导出）会影响如何导入：

1. 对于命名导出，我们必须使用大括号和确切名称作为导出的声明（即变量、函数或类）。
2. 对于默认导出，我们可以选择名称。

句法：

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // For our named imports

// Syntax single named import:
// import { importantData_1 }

// For our default export (foo), the name choice is arbitrary
import ourFunction from './A';

感兴趣的东西：

1. 在大括号内使用逗号分隔的列表，并与命名导出的导出名称匹配。
2. 使用您选择的不带花括号的名称作为默认导出。

别名：

每当您想重命名命名导入时，这都可以通过aliases。其语法如下：

import { importantData_1 as myData } from './A';

现在我们已经导入了importantData_1，但标识符myData不是importantData_1。