Почему мне нужно заключить некоторые импорта в фигурные скобки {} в 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 сторона синтаксиса, экспорт по умолчанию просто помечается путем добавления default после export ключевое слово:

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

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

На import Помимо синтаксиса, это усложняется: экспорт по умолчанию импортируется вне фигурных скобок. Весь другой экспорт импортируется в фигурных скобках.

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

Это импортирует экспортированный по умолчанию элемент модуля как bar а также импортировать (названный) другой экспорт foo, Обратите внимание, что экспорт по умолчанию не имеет фиксированного имени: исходное имя члена во время экспорта не имеет значения. Вместо этого вы даете ему имя при импорте. Таким образом, вы могли бы написать это вместо этого:

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

Это все равно импортирует тот же экспорт по умолчанию из модуля, но дает ему другое имя. Другие импорта, однако, должны иметь правильное имя, поскольку именно это используется для их идентификации. Однако вы можете дать им другое имя, используя as ключевое слово.

Есть несколько вещей, которые нужно знать при использовании export а также import заявления. Вы должны проверить MDN для полного описания их.

Answer 2

Если модуль, который вы импортируете, имеет экспорт по умолчанию, вам не нужно использовать синтаксис { } для доступа к данному экспорту. Именованные (не по умолчанию) экспорты должны быть доступны через синтаксис { }. Модуль может иметь экспорт по умолчанию, а также множество именованных экспортов.

Примером этого может быть React, который является экспортом по умолчанию, но модуль также имеет именованный экспорт компонента. Чтобы импортировать оба этих экспорта, синтаксис: import React, { Component } from 'react' будет использоваться.