resumen - utilizando corchetes con sintaxis de importación de JavaScript

lenguaje de programacion javascript

Question

Encontré una biblioteca de JavaScript que usa la siguiente sintaxis para importar bibliotecas:

import React, { Component, PropTypes } from ''react'';

¿Cuál es la diferencia entre el método anterior y el siguiente?

import React, Component, PropTypes from ''react'';

Answer 1

import React, { Component, PropTypes } from ''react''

Esto tomará los miembros exportados de { Component, PropTypes } del módulo ''react'' y los asignará a Component y PropTypes , respectivamente. React será igual a la exportación default del módulo.

Como lo señala torazaburo a continuación , esto es lo mismo que

import { default as React, Component, PropTypes } from ''react''

que es la abreviatura de

import { default as React, Component as Component, PropTypes as PropTypes} from ''react''

Aquí hay otro ejemplo ( enlace a gist ):

// myModule.js
export let a = true
export let b = 42
export let c = ''hello, world!''
// `d` is not exported alone
let d = ''some property only available from default''

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from ''myModule''
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : ''some property only available from default''
  }
*/

// example2.js
import something, { c } from ''myModule''
console.log(something)  // same as above; the `default` export
console.log(c)          // c === ''hello, world!''

// example3.js
import { a, b, d, default as something } from ''myModule''
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn''t export it individually)
console.log(something.d)  // something.d === ''some property...''

Probé el segundo ejemplo con babel:

import test, test3, test2 from ''./app/lib/queries.js''
console.log(test, test3, test2)

y obtuve un error de sintaxis.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from ''./app/lib/queries.js''
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

Como referencia, puede leer la nueva documentación de documentation de MDN. Sin embargo, aparentemente necesita una revisión técnica. La publicación del blog del Dr. Axel Rauschmayer es una mejor referencia por ahora.

Answer 2

import React, { Component, PropTypes } from ''react'';

Esto dice:

Importe la exportación predeterminada desde ''react'' con el nombre React e importe las exportaciones con nombre Component y PropTypes con los mismos nombres.

Esto combina las dos sintaxis comunes que probablemente haya visto

import React from ''react'';
import { Component, PropTypes } from ''react'';

El primero se usa para importar y nombrar la exportación predeterminada, el segundo para importar las exportaciones con nombre especificadas.

Como regla general, la mayoría de los módulos proporcionarán una única exportación predeterminada o una lista de exportaciones con nombre. Es algo menos habitual que un módulo proporcione tanto una exportación predeterminada como exportaciones con nombre. Sin embargo, en el caso de que haya una característica que se importe con mayor frecuencia, pero también subfunciones adicionales, es un diseño válido para exportar la primera como predeterminada y las restantes como exportaciones con nombre. Es en tales casos que usaría la sintaxis de import que se refiere.

Las otras respuestas están entre equivocadas y confusas, posiblemente porque los documentos de MDN en el momento en que se hizo esta pregunta eran erróneos y confusos. MDN mostró el ejemplo

import name from "module-name";

y dicho name es el "nombre del objeto que recibirá los valores importados". Pero eso es engañoso e incorrecto; en primer lugar, solo hay un valor de importación, que será "recibido" (por qué no decir simplemente "asignado a" o "usado para referirse a"), y el valor de importación en este caso es la exportación predeterminada del módulo.

Otra forma de explicar esto es notar que la importación anterior es exactamente idéntica a

import { default as name } from "module-name";

y el ejemplo del OP es exactamente idéntico a

import { default as React, Component, PropTypes } from ''react'';

La documentación de MDN pasó a mostrar el ejemplo

import MyModule, {foo, bar} from "my-module.js";

y afirmó que significa

Importe el contenido de un módulo completo, y algunos también se nombran explícitamente. Esto inserta myModule (sic), foo y bar en el ámbito actual. Tenga en cuenta que foo y myModule.foo son iguales, al igual que bar y myModule.bar

Lo que dijo MDN aquí, y lo que otras respuestas afirman basado en la documentación incorrecta de MDN, es absolutamente incorrecto y puede estar basado en una versión anterior de la especificación. Lo que esto realmente hace es

Importe la exportación del módulo predeterminado y algunas exportaciones explícitamente nombradas. Esto inserta MyModule , foo y bar en el alcance actual. No se puede acceder a los nombres de exportación foo y bar través de MyModule , que es la exportación predeterminada , no un paraguas que cubre todas las exportaciones.

(La exportación del módulo predeterminado es el valor exportado con la sintaxis export default , que también podría export {foo as default} ).

Los escritores de documentación de MDN pueden haberse confundido con la siguiente forma:

import * as MyModule from ''my-module'';

Esto importa todas las exportaciones de my-module y las hace accesibles con nombres como MyModule.name . La exportación predeterminada también es accesible como MyModule.default , ya que la exportación predeterminada no es más que otra exportación con nombre con el nombre default . En esta sintaxis, no hay forma de importar solo un subconjunto de las exportaciones nombradas, aunque se podría importar la exportación predeterminada, si hay una, junto con todas las exportaciones nombradas, con

import myModuleDefault, * as myModule from ''my-module'';