Я намагаюся визначити, чи є якісь великі відмінності між цими двома, крім того, що я можу імпортувати export default, просто виконуючи такі дії:

import myItem from 'myItem';

І за допомогою export constя можу:

import { myItem } from 'myItem';

Мені цікаво, чи є якісь відмінності та / або використовуються випадки, окрім цього.

Це імпортований експорт проти експорту за замовчуванням. export constце названий експорт, який експортує декларацію про конкуренцію або декларації.

Підкреслимо: тут важливим є exportключове слово, constяке використовується для декларації const або декларацій. exportможе також застосовуватися до інших декларацій, таких як декларації класів або функцій.

Експорт за замовчуванням ( export default)

Ви можете мати один експорт за замовчуванням на файл. Під час імпорту потрібно вказати ім’я та імпортувати так:

import MyDefaultExport from "./MyFileWithADefaultExport";

Ви можете дати цьому будь-яке ім’я.

Ім'яний експорт ( export)

З іменованим експортом ви можете мати кілька імпортованих експортів на файл. Потім імпортуйте конкретний експорт, який ви хочете оточити дужками:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Або можна використовувати типовий параметр разом із імпортованим імпортом у тому самому операторі:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Імпорт простору імен

Також можливо імпортувати все з файлу на об’єкт:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

Примітки

• Синтаксис надає перевагу експорту за замовчуванням як трохи більш стислим, тому що випадок їх використання є більш поширеним ( див. Обговорення тут ).

• Експорт за замовчуванням - це фактично названий експорт із назвою, defaultщоб ви могли імпортувати його з імпортованим імпортом:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

export defaultвпливає на синтаксис при імпорті експортованої "речі", при дозволі імпортувати те, що було експортовано, вибираючи саме ім'я import, незалежно від того, яке ім'я було його експортувати, просто тому, що воно позначене як "за замовчуванням".

Корисний випадок використання, який мені подобається (і використовую), дозволяє експортувати анонімну функцію без явного її імені, і лише тоді, коли ця функція імпортується, їй потрібно дати ім'я:

Приклад:

Експортуйте 2 функції, одна з них default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

Імпортуйте вищевказані функції. Створення імені для defaultодного:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

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

Помилкові приклади:

1. Функція за замовчуванням має бути першою для імпорту

   import {divide}, square from './module_1.js

2. divide_1не було експортовано module_1.js, тому нічого не буде імпортовано

   import {divide_1} from './module_1.js

3. squareне експортувались у module_1.js, оскільки {}спонукає двигун чітко шукати лише названий експорт.

   import {square} from './module_1.js

Незначна примітка. Будь ласка, врахуйте, що при імпорті з експорту за замовчуванням ім'я повністю незалежне. Це фактично впливає на рефактори.

Скажімо, у вас такий клас Fooіз відповідним імпортом:

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

Тепер, якщо ви перефактуруєте свій Fooклас, Barа також перейменовуєте файл, більшість IDE НЕ торкаються вашого імпорту. Отже, ви закінчите це:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

Особливо в Typescript, я дуже ціную названий експорт і більш надійне рефакторинг. Різниця полягає лише у відсутності defaultключового слова та фігурних брекетів. Цей файл btw також заважає вводити помилку в імпорті, оскільки зараз ви перевіряєте тип.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

З документації :

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

Щодо експорту за замовчуванням, існує лише один експорт за замовчуванням на модуль. Експорт за замовчуванням може бути функцією, класом, об’єктом чи будь-чим іншим. Це значення слід вважати "основним" експортованим значенням, оскільки воно буде найпростішим для імпорту.

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

У мене виникла проблема, що браузер не використовує es6.

У мене це виправлено:

 <script type="module" src="index.js"></script>

Модуль типу повідомляє браузеру використовувати ES6.

export const bla = [1,2,3];

import {bla} from './example.js';

Тоді це має спрацювати.