Когда следует использовать фигурные скобки для импорта ES6?

TL; DR: фигурные скобки используются, если вы хотите импортировать по умолчанию экспорт.

см. ответ Дана Абрамова выше для получения более подробной информации.

Я бы сказал, что для import ES6 ключевое слово стоит упомянуть.

Если вы попытаетесь console log Mix:

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

вы получите:

когда следует использовать фигурные скобки для импорта ES6?

кронштейны золотые когда вам нужны только специфические компоненты от модуля, который делает более небольшие следы для bundlers как webpack.

дан Абрамов ответ выше объясняет о экспорт по умолчанию и названы экспорт.

что использовать?

Цитируя Дэвида Германа: ECMAScript 6 поддерживает стиль экспорта single/default и дает самый сладкий синтаксис для импорта по умолчанию. Импорт именованного экспорта может и даже должен быть несколько менее кратким.

однако в TypeScript с именем export предпочтение отдается из-за рефакторинга. Например, если вы экспортируете класс по умолчанию и переименовываете его, имя класса будет изменяться только в этом файле, а не в других ссылках, с именем exports имя класса будет переименовано во всех ссылках. Именованный экспорт также предпочтителен для утилит.

в целом используйте все, что вы предпочитаете.

дополнительные

экспорт по умолчанию на самом деле именованный экспорт с именем по умолчанию, поэтому экспорт по умолчанию может быть импортирован как:

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

Если вы думаете о import Как только синтаксический сахар для модулей узлов, объектов и деструктурирования, я нахожу его довольно интуитивным.

// 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' // same thing, object functionA and functionB props


// just one prop 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 заявления, во-первых, вы должны понять концепцию уничтожение представил в ЕС6

1. объект деструктурируется

   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
   

2. массив деструктурируется

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo
   

   использование списка соответствия

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout
   

   использование распространение оператор

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];
   

теперь, когда мы убрали это с нашего пути, в ЕС6 вы можете экспортировать несколько модулей. Затем вы можете использовать объект destructuring, как показано ниже

предположим, у вас есть модуль под названием 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');

вы также можете использовать различные имена переменных, такие как so

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

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

обычно при экспорте функции необходимо использовать {}

if you have export const x 

вы используете import {x} from ''

if you use export default const x 

вам нужно использовать import X from '' здесь вы можете изменить X на любую переменную, которую требуется

фигурные скобки ({}) используются для импорта именованных Привязок, а концепция, стоящая за ним, - деструктурирование присваивания

простая демонстрация того, как оператор import работает с примером, можно найти в моем собственном ответе на аналогичный вопрос в когда мы используем "{ } " в импорте javascript?