domyślne słów kluczowych w ES6 import eksport

Question

mam dwa pliki, pierwszy jest todoHelper.js

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

później chcę użyć addTodo w innym pliku, po prostu zrobić import {addTodo} from './todoHelpers'

Ale widzę też ludzi robiących domyślne dane eksportowe zamiast po prostu eksportować. Jakie są różnice?

Answer 1

Można mieć tylko jeden domyślny eksportowej na plik i stąd kiedy robisz domyślne eksportowej jak

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

można importować go jak

import MyAddTodo from './todoHelpers' 

Od Babel wie, że próbujesz uzyskać dostęp do domyślny komponent, możesz uzyskać do niego dostęp w dowolnej nazwie pod dowolną nazwą

Załóżmy teraz, że wykonujesz

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

Można mieć wiele takich eksportu w złożyć jak

eksport AddTodo const = (listy, pozycja) => [... lista, poz] eksport const DeleteTodo = (lista, pozycja) => [... lista, poz]

i podczas importowania trzeba będzie destructure je jak

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

teraz skoro masz wiele takich eksportu zatem babel przyzwyczajenie wiedzieć, który składnik jesteś tyring na dostęp, jeśli dostęp, jeśli pod inną nazwą, taką jak

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

Jeśli chcesz to zrobić, trzeba będzie je importować jak to jest i je zmienić thier nazwę jak

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

Więc jako ogólnej praktyki będziesz default export główny składnik i reszta co możliwe Eksportuj normalnie lub gdy masz tylko jeden komponent, który musisz wyeksportować z pliku, możesz wybrać, co chcesz, ale dobrym sposobem będzie domyślnie export.

Answer 2

Korzystanie z domyślnego słowa kluczowego eksportu daje nam wolność do importowania z alias

export default k // in file my.js 

mogą być importowane z alias „b”

import b from 'my.js'