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语法上，只需在default关键字后添加export即可标记默认导出：

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