为什么我需要在 ES6 中用数字括号 {} 包装一些导入？ [复制]

Question

我在 ES6 中发现了一个奇怪的情况。例如，我正在使用 npm 包 react 和 react-router。我想将它们导入到文件中：

import React from "react";
import { browserHistory } from "react-router";

奇怪的情况是我需要将browserHistory 包裹在数字括号中，但我不需要包裹React。是什么原因？

import { React } from "react"; // React is undefined
import browserHistory from "react-router"; // browserHistory is undefined

我需要自定义导入的原因是什么？

Answer 1

ES6 模块区分两种导出：默认导出和其他导出。

每个模块最多可以有 一个 默认导出。默认导出有点像模块的“主要吸引力”。它应该是您可能希望模块拥有的一件事。所有其他出口都属于其他类别。

所以一个模块可以有任意数量的导出（甚至为零），其中最多一个可以是默认导出。

在语法的export side 上，默认导出只是通过在export 关键字后添加default 来标记：

// this is a normal export
export var foo = 'foo';

// this is a default export
var bar = 'bar';
export default bar;

在import side 的语法中，这变得更加复杂：默认导出是在花括号之外导入的。所有其他导出都在花括号内导入。

import bar, { foo } from 'some-module';

这会将模块的默认导出成员导入为bar，并导入（命名的）其他导出foo。请注意，默认导出没有固定名称：导出时成员的原始名称无关紧要。相反，您在导入时给它一些名称。所以你也可以这样写：

import baz, { foo } from 'some-module';

这仍然会从模块导入相同的默认导出，但给它一个不同的名称。然而，其他导入需要有正确的名称，因为这是用来识别它们的。但是，您可以使用 as 关键字给它们起一个不同的名称。

在使用 export 和 import 语句时，还有一些事情需要了解。您应该查看 MDN 以获取它们的完整描述。

Answer 2

如果您要导入的模块具有默认导出，那么您不必使用 { } 语法来访问给定的导出。命名（非默认）导出必须通过 { } 语法访问。一个模块可以有一个默认导出以及许多命名导出。

React 就是一个例子，它是一个默认导出，但是该模块也有一个命名的 Component 导出。要导入这两个导出，请使用以下语法：import React, { Component } from 'react'。