Когда следует использовать скобки с импортом

У меня есть два файла, первый – todoHelper.js

он имеет export const addTodo = (list, item) => [...list, item]

позже я хочу использовать addTodo в другом файле, я просто import {addTodo} from './todoHelpers'

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

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

 export default AddTodo = (list, item) => [...list, item] 

Вы можете импортировать его как

 import MyAddTodo from './todoHelpers' 

Поскольку babel знает, что вы пытаетесь получить доступ к компоненту по умолчанию, вы можете получить к нему доступ в своем файле по любому имени

Теперь предположим, что вы

 export const AddTodo = (list, item) => [...list, item] 

У вас может быть несколько таких экспорта в вашем файле, как

export const AddTodo = (list, item) => [… list, item] export const DeleteTodo = (list, item) => [… list, item]

и когда вы импортируете, вам нужно будет разрушить их, как

 import {AddTodo, DeleteTodo}from './todoHelpers' 

Теперь, поскольку у вас есть такой экспорт, поэтому babel не знает, какой компонент вы используете для доступа, если вы получаете доступ, если под другим именем

 import {MyAddTodo, MyDeleteTodo}from './todoHelpers' 

Если вы хотите сделать это, вам придется импортировать их так, как они есть, и они меняют имя

 import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo}from './todoHelpers' 

Так как общая практика вы по default export основной компонент, а остальное вы можете иметь как экспорт в обычном режиме или когда у вас есть только один компонент, который вам нужно экспортировать из файла, тогда вы можете выбрать все, что хотите, но хорошим способом будет export это по умолчанию.

Использование ключевого слова default с экспортом дает нам свободу импорта с псевдонимом

 export default k // in file my.js 

могут быть импортированы с псевдонимом ‘b’

 import b from 'my.js' 
  • Uncaught TypeError: fs.readFileSync не является функцией
  • Как загрузить все файлы в каталог с помощью webpack без запросов
  • Нет заголовка «Access-Control-Allow-Origin» в приложении Angular 2
  • Как добавить шрифт-awesome в проект Angular 2 + CLI
  • Webpack style-loader vs css-loader
  • Перемещение Webpack 4 CommonsChunkPlugin
  • Как отменить Angular 2 Cli ng-eject?
  • Как сообщить серверу webpack dev для обслуживания index.html для любого маршрута
  • Давайте будем гением компьютера.