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

Question

这似乎是显而易见的，但我发现自己对何时使用花括号导入ES6中的单个模块感到有点困惑。例如，在我正在处理的React-原住民项目中，我有以下文件及其内容：

文件initialState.js

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

在TodoReducer.js中，我必须不带大括号导入它：

import initialState from './todoInitialState';

如果我将initialState用大括号括起来，下面的代码行会出现以下错误：

无法读取未定义的属性待办事项

文件TodoReducer.js

export default function todos(state = initialState.todo, action) {
    // ...
}

使用花括号的组件也会出现类似的错误。我想知道什么时候应该为单个导入使用大括号，因为很明显，在导入多个组件/模块时，您必须将它们用大括号括起来，我知道这一点。

这里的堆栈溢出帖子没有回答我的问题，而是问我什么时候应该或者不应该使用花括号来导入单个模块，或者我不应该使用花括号来导入ES6中的单个模块(显然不是这样，因为我看到了需要花括号的单个导入)。

Answer 1

这是一个默认导入

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

因为它总是解决默认导出 of A的任何问题。

这是一个名为的导入，名为

import { A } from './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!

要使这些工作正常进行，您需要向添加一个相应的名为export的A

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

一个模块只能拥有一个默认的导出，但是可以拥有您想要的(0、1、2或多)。您可以将它们一起导入：

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

默认的导出通常用于您通常期望从模块获得的任何东西。命名导出通常用于方便的实用程序，但并不总是必要的。但是，您可以选择如何导出东西:例如，模块可能根本没有默认的导出。

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

Answer 2

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

​

​

如果您尝试控制台日志混合：

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

你会得到：

​

​

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

当您只需要模块中的特定组件时，括号是金色的，这样可以为webpack这样的发球者留下较小的脚印。

Answer 3

丹·艾布拉莫夫的回答解释了默认导出和名为exports的。

使用哪一个？

引用David的话：ECMAScript 6倾向于单一/默认的导出样式，并为导入默认值提供了最优美的语法。导入命名的导出可以而且甚至应该稍微不那么简洁。

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

总之，你喜欢什么就用什么。

附加

默认导出实际上是一个名称默认的命名导出，因此默认导出可以导入如下：

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