javascript - ecmascript - ¿Cuándo debo usar llaves para importar ES6?

ecmascript 6 documentation

Question

Parece obvio, pero me encontré un poco confundido acerca de cuándo usar llaves para importar un solo módulo en ES6. Por ejemplo, en el proyecto React-Native en el que estoy trabajando, tengo el siguiente archivo y su contenido:

initialState.js

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;

En TodoReducer.js, tengo que importarlo sin llaves:

import initialState from ''./todoInitialState'';

Si incluyo el initialState entre llaves, initialState el siguiente error para la siguiente línea de código:

No se puede leer la propiedad todo de indefinido

TodoReducer.js:

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

Errores similares también le ocurren a mis componentes con las llaves. Me preguntaba cuándo debería usar llaves para una sola importación, porque obviamente, al importar múltiples componentes / módulos, debe encerrarlos en llaves, lo que sé.

Editar:

La publicación SO here no responde a mi pregunta, sino que pregunto cuándo debería o no usar llaves para importar un solo módulo, o nunca debería usar llaves para importar un solo módulo en ES6 (aparentemente este no es el caso, como he visto importación única con llaves necesarias)

Answer 1

Resumen de los módulos ES6 :

exportaciones:

Tienes 2 tipos de exportaciones:

1. Exportaciones nombradas
2. Exportaciones predeterminadas, máximo 1 por módulo

Sintaxis:

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

Importaciones:

El tipo de exportación (es decir, exportaciones con nombre o predeterminadas) afecta cómo importar algo:

1. Para una exportación con nombre tenemos que usar llaves y el nombre exacto como la declaración (es decir, variable, función o clase) que se exportó.
2. Para una exportación predeterminada, podemos elegir el nombre.

Sintaxis:

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

Cosas de interes:

1. Utilice una lista separada por comas entre llaves con el nombre correspondiente de la exportación para la exportación con nombre.
2. Use un nombre de su elección sin llaves para una exportación predeterminada.

Alias

Siempre que desee cambiar el nombre de una importación con nombre, esto es posible mediante alias . La sintaxis para esto es la siguiente:

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

Ahora hemos importado importantData_1 pero el identificador es myData lugar de importantData_1 .

Answer 2

Diría que también hay una notación destacada para la palabra clave ES6 de import vale la pena mencionar.

Si intenta consolar el registro de Mix:

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

Conseguirás:

¿Cuándo debo usar llaves para importar ES6?

Los corchetes son dorados cuando solo necesita componentes específicos del módulo, lo que crea huellas más pequeñas para los paquetes como webpack.

Answer 3

Esta es una importación predeterminada :

// B.js
import A from ''./A''

Solo funciona si A tiene la exportación predeterminada :

// A.js
export default 42

En este caso, no importa qué nombre le asignes al importar:

// B.js
import A from ''./A''
import MyA from ''./A''
import Something from ''./A''

Porque siempre se resolverá a lo que sea la exportación predeterminada de A

Esta es una importación con nombre llamada A :

import { A } from ''./A''

Solo funciona si A contiene una exportación con nombre llamada A :

export const A = 42

En este caso, el nombre importa porque está importando algo específico por su nombre de exportación :

// B.js
import { A } from ''./A''
import { myA } from ''./A'' // Doesn''t work!
import { Something } from ''./A'' // Doesn''t work!

Para que esto funcione, debe agregar una exportación con nombre correspondiente a A :

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

Un módulo solo puede tener una exportación predeterminada , pero tantas exportaciones con nombre como desee (cero, uno, dos o muchos). Puedes importarlos todos juntos:

// B.js
import A, { myA, Something } from ''./A''

Aquí, importamos la exportación predeterminada como A , y las exportaciones con nombre se llaman myA y Something , respectivamente.

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

También podemos asignarles nombres diferentes al importar:

// B.js
import X, { myA as myX, Something as XSomething } from ''./A''

Las exportaciones predeterminadas tienden a usarse para lo que normalmente espera obtener del módulo. Las exportaciones nombradas tienden a usarse para utilidades que pueden ser útiles, pero que no siempre son necesarias. Sin embargo, depende de usted elegir cómo exportar las cosas: por ejemplo, un módulo podría no tener una exportación predeterminada.

Esta es una excelente guía para los módulos ES, que explica la diferencia entre exportaciones predeterminadas y con nombre.

Answer 4

La respuesta anterior de Dan Abramov explica las exportaciones predeterminadas y las exportaciones con nombre .

¿Cuál usar?

Citando a David Herman : ECMAScript 6 favorece el estilo de exportación único / predeterminado, y brinda la sintaxis más dulce para importar el valor predeterminado. Importar exportaciones con nombre puede e incluso debería ser un poco menos conciso.

Sin embargo, en TypeScript, la exportación con nombre se ve favorecida por la refactorización. Ejemplo, si exporta por defecto una clase y le cambia el nombre, el nombre de la clase cambiará solo en ese archivo y no en las otras referencias, con el nombre de clase de exportaciones con nombre se cambiará el nombre en todas las referencias. Las exportaciones con nombre también se prefieren para los servicios públicos.

En general, use lo que prefiera.

Adicional

La exportación predeterminada es en realidad una exportación con nombre con nombre predeterminado, por lo que la exportación predeterminada se puede importar como:

import {default as Sample} from ''../Sample.js'';

Answer 5

Para comprender el uso de llaves en las declaraciones de import , primero debe comprender el concepto de destrucción introducido en ES6

1. Desestructuración de objetos

   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. Desestructuración de matrices

   var [firstGame] = [''Gran Turismo'', ''Burnout'', ''GTA''];
   console.log(firstGame); // Gran Turismo

   Usando la correspondencia

    var [,secondGame] = [''Gran Turismo'', ''Burnout'', ''GTA''];
   console.log(secondGame); // Burnout

   Usando el operador de propagación

   var [firstGame, ...rest] = [''Gran Turismo'', ''Burnout'', ''GTA''];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// [''Burnout'', ''GTA''];

Ahora que lo hemos eliminado, en ES6 puede exportar múltiples módulos. Luego puede hacer uso de la desestructuración de objetos como a continuación

Supongamos que tiene un módulo llamado module.js

 export const printFirstname(firstname) => console.log(firstname);
export const printLastname(lastname) => console.log(lastname);

Desea importar las funciones exportadas a index.js ;

 import {printFirstname, printLastname} from ''./module.js''
printFirstname(''Taylor'');
printLastname(''Swift'');

También puede usar diferentes nombres de variables como así

 import {printFirstname as pFname, printLastname as pLname} from ''./module.js''
pFname(''Taylor'');
pLanme(''Swift'');

Answer 6

Si piensa en import como solo azúcar de sintaxis para módulos de nodo, objetos y desestructuración, creo que es bastante intuitivo.

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

Answer 7

por lo general, cuando exporta una función, necesita usar {}

if you have export const x 

usa import {x} from ''''

if you use export default const x 

necesita usar import X from '''' aquí puede cambiar X a la variable que desee

Answer 8

Las llaves ({}) se usan para importar enlaces con nombre y el concepto detrás de esto es la asignación de desestructuración

Puede encontrar una demostración simple de cómo funciona la declaración de importación con un ejemplo en mi propia respuesta a una pregunta similar en ¿ Cuándo usamos ''{}'' en las importaciones de JavaScript?

Answer 9

TL; DR : las llaves se usan si desea importar una exportación no predeterminada.

Vea la respuesta de Dan Abramovs arriba para más detalles.