javascript - ecmascript - ¿Cuándo debo usar llaves para importar ES6?
ecmascript 6 documentation (9)
Resumen de los módulos
ES6
:
exportaciones:
Tienes 2 tipos de exportaciones:
- Exportaciones nombradas
- 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:
- 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ó.
- 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:
- Utilice una lista separada por comas entre llaves con el nombre correspondiente de la exportación para la exportación con nombre.
- 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
.
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.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;
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:
TodoReducer.js:No se puede leer la propiedad todo de indefinido
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)
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.
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.
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'';
Para comprender el uso de llaves en las declaraciones de
import
, primero debe comprender el concepto de
destrucción
introducido en
ES6
-
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
-
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'');
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'';
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
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?
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.