Это кажется очевидным, но я был немного озадачен тем, когда использовать фигурные скобки для импорта одного модуля в ES6. Например, в проекте React-Native, над которым я работаю, у меня есть следующий файл и его содержимое:
initialState.jsvar 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
фигурные скобки, я получаю следующую ошибку для следующей строки кода:
TodoReducer.js:Невозможно прочитать свойство todo из undefined
export default function todos(state = initialState.todo, action) {
// ...
}
Подобные ошибки также случаются с моими компонентами с помощью фигурных скобок. Мне было интересно, когда я должен использовать фигурные скобки для одного импорта, потому что, очевидно, при импорте нескольких компонентов / модулей, вы должны заключить их в фигурные скобки, что я знаю.
Редактировать:
Сообщение SO здесь не отвечает на мой вопрос, вместо этого я спрашиваю, когда я должен или не должен использовать фигурные скобки для импорта одного модуля, или я никогда не должен использовать фигурные скобки для импорта одного модуля в ES6 (это, очевидно, не случай, как я видел один импорт с фигурными скобками требуется)
источник
Ответы:
Это импорт по умолчанию :
Работает только при наличии экспорта
A
по умолчанию :В этом случае не имеет значения, какое имя вы назначаете при импорте:
Потому что он всегда будет разрешен для экспорта по умолчанию
A
.Это именованный импорт, который называется
A
:Это работает только если
A
содержит именованный экспорт с именемA
:В этом случае имя имеет значение, потому что вы импортируете конкретную вещь по имени экспорта :
Чтобы это работало, вы должны добавить соответствующий именованный экспорт в
A
:Модуль может иметь только один экспорт по умолчанию , но столько именованных экспортов, сколько вы хотите (ноль, один, два или много). Вы можете импортировать их все вместе:
Здесь мы импортируем экспорт по умолчанию как
A
, а именованные экспорты называютсяmyA
иSomething
, соответственно.Мы также можем назначить им разные имена при импорте:
Экспорт по умолчанию, как правило, используется для всего, что вы обычно ожидаете получить от модуля. Названные экспорты обычно используются для утилит, которые могут быть полезны, но не всегда необходимы. Однако вам решать, как экспортировать вещи: например, модуль может вообще не иметь экспорта по умолчанию.
Это отличное руководство по модулям ES, объясняющее разницу между экспортом по умолчанию и именованным экспортом.
источник
export const myA = 43; export const Something = 44;
а такжеexport default { myA, Something }
? Поэтому, когда вы импортируете, вы можете либоimport A from './A';
для всего в модуле, либоimport { Something } from './A';
вы получите только часть модуляimport * as AllTheThings
.import 'firebase/storage';
илиimport 'rxjs/add/operator/map';
. Что это на самом деле делает?Я бы сказал, что есть
import
ключевое слово для ключевого слова ES6, которое стоит упомянуть.Если вы пытаетесь консоль журнала Mix:
Ты получишь:
Скобки золотые, когда вам нужны только определенные компоненты из модуля, что делает меньшие следы для упаковщиков, таких как веб-пакет.
источник
import * as Mix from "./A";
иimport A as Mix from "./A";
то же самое?Дан Абрамов в ответе выше объясняет об экспорте по умолчанию и именном экспорте .
Какой использовать?
Цитата Дэвида Хермана : ECMAScript 6 поддерживает стиль экспорта «один / по умолчанию» и дает самый приятный синтаксис для импорта по умолчанию. Импорт именованных экспортов может и даже должен быть несколько менее кратким.
Однако в TypeScript именной экспорт предпочтителен из-за рефакторинга. Например, если вы экспортируете класс по умолчанию и переименовываете его, имя класса изменится только в этом файле, а не в других ссылках, а имя класса экспортированного имени будет переименовано во всех ссылках. Именованный экспорт также предпочтителен для коммунальных услуг.
В целом используйте все, что вы предпочитаете.
дополнительный
Экспорт по умолчанию на самом деле является именованным экспортом с именем по умолчанию, поэтому экспорт по умолчанию можно импортировать как:
источник
Additional
Линия хорошая информация.import A from './A'
не имеет смысла, если вы экспортируете без определения имени какexport default 42
.Если вы думаете,
import
что это просто синтаксический сахар для узловых модулей, объектов и деструктуризации, я считаю, что это довольно интуитивно понятно.источник
Чтобы понять использование фигурных скобок в
import
утверждениях, сначала вы должны понять концепцию разрушения, введенную в ES6.Деструктуризация объекта
Разрушение массива
Использование сопоставления списков
Использование оператора распространения
Теперь, когда у нас все в порядке, в ES6 вы можете экспортировать несколько модулей. Затем вы можете использовать разрушение объекта, как показано ниже
Давайте предположим, что у вас есть модуль с именем
module.js
Вы хотели бы импортировать экспортируемые функции в
index.js
;Вы также можете использовать разные имена переменных, как так
источник
import {printFirstname as pFname, printLastname as pLname} from './module.js'
эквивалентно:var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift');
Сводные
ES6
модули:экспорт:
У вас есть 2 вида экспорта:
Синтаксис:
Импорт:
Тип экспорта (т.е. с именем или экспорта по умолчанию) влияет как на импорт чего - то:
Синтаксис:
Интересные вещи:
Псевдонимы:
Всякий раз, когда вы хотите переименовать именованный импорт, это возможно с помощью псевдонимов . Синтаксис для этого следующий:
Теперь мы импортировали,
importantData_1
но идентификаторmyData
вместоimportantData_1
.источник
обычно при экспорте функции необходимо использовать {}
ты используешь
import {x} from ''
вам нужно использовать
import X from ''
здесь вы можете изменить X на любую переменную, которую вы хотитеисточник
Фигурные скобки ({}) используются для импорта именованных привязок, а концепция, лежащая в их основе, - это деструктурирующее назначение
Простую демонстрацию того, как оператор import работает с примером, можно найти в моем собственном ответе на аналогичный вопрос в разделе «Когда мы используем« {} »в импорте javascript?
источник
Фигурные скобки используются только для импорта при названии экспорта. Если экспорт по умолчанию, то фигурные скобки не используются для импорта.
источник
Для экспорта по умолчанию мы не используем {} при импорте.
например
player.js
index.js
index.js
player.js
Если мы хотим импортировать все, что экспортируем, тогда мы используем *
источник