usando corchetes con sintaxis de importación javascript

Me encontré con 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';

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

Esto dice:

Importe la exportación predeterminada'react' con el nombre Reacte importe las exportaciones con nombreComponent y PropTypescon los mismos nombres.

Esto combina las dos sintaxis comunes que probablemente hayas visto

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

El primero se utiliza 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 para un módulo para proporcionar tanto una exportación por defecto y las exportaciones con nombre. Sin embargo, en el caso de que haya una característica que se importe con mayor frecuencia, pero también subcaracterísticas adicionales, es un diseño válido exportar la primera como predeterminada y las restantes como exportaciones con nombre. En tales casos, utilizaría la importsintaxis a la que se refiere.

Las otras respuestas están en algún lugar entre incorrectas y confusas, posiblemente porque los documentos de MDN en el momento en que se hizo esta pregunta eran incorrectos y confusos. MDN mostró el ejemplo

import name from "module-name";

y dicho namees 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 "utilizado para referirse a") name, y el valor de importación en este caso es la exportación predeterminada del módulo. .

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

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

y el ejemplo del OP es precisamente 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 nombrarán explícitamente. Esto inserta myModule(sic) foo, y baren el alcance actual. Tenga en cuenta que fooy myModule.fooson lo mismo, como son barymyModule.bar

Lo que MDN dijo aquí, y lo que afirman otras respuestas basadas en la documentación de MDN incorrecta, es absolutamente incorrecto y puede basarse 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 con nombres explícitos. Esto inserta MyModule, fooy baren el ámbito actual. No se puede acceder a los nombres de exportación fooy a través debarMyModule , que es la exportación predeterminada , no un paraguas que cubra todas las exportaciones.

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

Los escritores de documentación de MDN pueden haberse confundido con el siguiente formulario:

import * as MyModule from 'my-module';

Esto importa todas las exportaciones de my-moduley 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 nombrada con el nombre default. En esta sintaxis, no hay forma de importar solo un subconjunto de las exportaciones con nombre, aunque se podría importar la exportación predeterminada, si existe, junto con todas las exportaciones con nombre, con

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

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

Esto tomará los { Component, PropTypes }miembros exportados del 'react'módulo y los asignará a Componenty PropTypes, respectivamente. Reactserá igual a la defaultexportación del módulo .

Como 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 la esencia ):

// 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 importdocumentación 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.