Dan Abramov的回答解释了默认输出和指定输出。

用哪一种?

引用大卫·赫尔曼的话:

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

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

总的来说，你喜欢什么就用什么。

额外的

默认导出实际上是一个名称为Default的命名导出，因此默认导出可以导入为:

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

花括号({})用于导入命名绑定，其背后的概念是解构赋值

关于import语句如何工作的简单演示可以在我自己对类似问题的回答中找到，在javascript导入中何时使用“{}”?

为了理解import语句中花括号的使用，首先，你必须理解ES6中引入的解构概念

Object destructuring var bodyBuilder = { firstname: 'Kai', lastname: 'Greene', nickname: 'The Predator' }; var {firstname, lastname} = bodyBuilder; console.log(firstname, lastname); // Kai Greene firstname = 'Morgan'; lastname = 'Aste'; console.log(firstname, lastname); // Morgan Aste Array destructuring var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(firstGame); // Gran Turismo Using list matching var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(secondGame); // Burnout Using the spread operator var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(firstGame);// Gran Turismo console.log(rest);// ['Burnout', 'GTA'];

现在我们已经解决了这个问题，在ES6中你可以导出多个模块。然后你可以像下面这样使用对象解构。

让我们假设您有一个名为module.js的模块

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

你想把导出的函数导入到index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

你也可以像这样使用不同的变量名

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

ES6模块概述:

出口:

您有两种类型的导出:

叫出口 默认导出，每个模块最多导出一个

语法:

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

进口:

导出的类型(即命名导出或默认导出)会影响导入内容的方式:

对于命名导出，我们必须使用花括号和确切的名称作为导出的声明(即变量，函数或类)。 对于默认导出，我们可以选择名称。

语法:

// 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';

感兴趣的事情:

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

别名:

无论何时你想重命名一个命名导入，这是可能的通过别名。语法如下:

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

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

如果你认为导入只是Node.js模块、对象和解构的语法糖，我发现它非常直观。

// 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';

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

如果你尝试控制台日志Mix:

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

你会得到:

什么时候我应该用大括号导入ES6 ?

当您只需要模块中的特定组件时，括号是黄金，这为webpack等捆绑器节省了更小的占用空间。