Коли я повинен використовувати фігурні дужки для імпорту ES6?

Це здається очевидним, але я трохи заплутався, коли використовувати фігурні дужки для імпорту одного модуля в ES6. Наприклад, у проекті React-Native, над яким я працюю, у мене є такий файл та його вміст:

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фігурні дужки, я отримаю таку помилку для наступного рядка коду:

Неможливо прочитати todo властивості невизначеного

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

Подібні помилки трапляються і в моїх компонентах із фігурними дужками. Мені було цікаво, коли я повинен використовувати фігурні дужки для одного імпорту, тому що, очевидно, при імпорті декількох компонентів / модулів ви повинні укладати їх у фігурні дужки, які я знаю.

Редагувати:

Публікація SO тут не відповідає на моє запитання, натомість я запитую, коли я повинен або не повинен використовувати фігурні дужки для імпорту одного модуля, або я ніколи не повинен використовувати фігурні дужки для імпорту одного модуля в ES6 (це, мабуть, не випадку, як я бачив, потрібен один імпорт із фігурними дужками)

Це імпорт за замовчуванням :

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

Тому що він завжди буде вирішувати все , що є експорт по замовчуванням в A.

Це імпортований імпорт, який називаєтьсяA :

import { A } from './A'

Він працює лише в тому випадку, якщо 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!

Щоб зробити цю роботу, слід додати відповідний експорт з назвою до A:

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

Модуль може мати лише один експорт за замовчуванням , але стільки іменованих експортів, скільки ви хочете (нуль, один, два або багато). Ви можете імпортувати їх усі разом:

// 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, що пояснює різницю між типовим експортом та названим експортом.

TL; DR : фігурні дужки використовуються, якщо ви хочете імпортувати експорт, який не використовується за замовчуванням.

Дивіться відповідь Дана Абрамова вище для більш детальної інформації.

Я б сказав, що для importключового слова ES6 варто згадати також позначення зірочкою .

Якщо ви спробуєте консолірувати журнал Mix:

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

Ти отримаєш:

Коли я повинен використовувати фігурні дужки для імпорту ES6?

Кронштейни золоті, коли вам потрібні лише конкретні компоненти модуля, що робить менші сліди для таких постачальників, як webpack.

Відповідь Дана Абрамова пояснює вище про експорт за замовчуванням та названий експорт .

Який використовувати?

Цитуючи Девіда Германа : ECMAScript 6 надає перевагу стилю експорту одиночного / за замовчуванням та надає найсолодший синтаксис імпорту за замовчуванням. Імпорт названого експорту може і навіть повинен бути трохи менш стислим.

Однак у TypeScript з ім'ям експорт переважний через рефакторинг. Наприклад, якщо ви експортуєте клас за замовчуванням і перейменовуєте його, ім'я класу буде змінено лише у цьому файлі, а не в інших посиланнях, при цьому назване ім'я класу експорту буде перейменовано у всі посилання. Названий експорт також є кращим для комунальних підприємств.

Загалом використовуйте все, що вам зручніше.

Додатковий

Експорт за замовчуванням - це фактично названий експорт з типовим іменем, тому експорт за замовчуванням можна імпортувати як:

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висловлюваннях, спочатку ви повинні зрозуміти поняття руйнування, введене в ES6

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'];

Тепер, коли ми вийшли з цього шляху, в ES6 ви можете експортувати кілька модулів. Потім ви можете скористатися руйнуванням об'єктів, як показано нижче

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

Ви також можете використовувати різні назви змінних, як так

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

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

Резюме ES6модулів:

експорт:

У вас є два види експорту:

1. Названий експорт
2. Експорт за замовчуванням, макс. 1 на модуль

Синтаксис:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

Імпорт:

Тип експорту (тобто з ім'ям або експорту по замовчуванню) впливає як на імпорт чого - то:

1. Для названого експорту ми повинні використовувати фігурні дужки та точну назву як декларацію (тобто змінну, функцію чи клас), яка експортувалася.
2. Для експорту за замовчуванням ми можемо вибрати ім'я.

Синтаксис:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

Цікаві речі:

1. Використовуйте відокремлений комою список у фігурних дужках із відповідною назвою експорту для названого експорту.
2. Використовуйте назву за вибором без фігурних дужок для експорту за умовчанням.

Псевдоніми:

Кожен раз, коли ви хочете перейменувати імпорт з ім’ям, це можливо через псевдоніми . Синтаксис для цього такий:

import { importantData_1 as myData } from './A';

Зараз ми імпортували, importantData_1 але myDataзамість цього є ідентифікатор importantData_1.

Зазвичай при експорті функції потрібно використовувати {}

if you have export const x 

ти використовуєш import {x} from ''

if you use export default const x 

вам потрібно використовувати import X from '' тут, ви можете змінити X на будь-яку змінну, яку ви хочете

Фігурні дужки ({}) використовуються для імпортування названих прив'язок, а концепція, що стоїть за ним, деструктує призначення

Просту демонстрацію того, як працює приклад імпорту на прикладі, можна знайти в моїй власній відповіді на подібне запитання на тему: Коли ми використовуємо '{}' в імпорті JavaScript?

Фігурні дужки використовуються лише для імпорту, коли імпорт експортується. Якщо експорт за замовчуванням, то фігурні дужки не використовуються для імпорту.

Для експорту за замовчуванням ми не використовуємо {} під час імпорту.

напр

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

Якщо ми хочемо імпортувати все, що експортуємо, ми використовуємо *