uso de corchetes con sintaxis de importación de javascript

Me encontré con una biblioteca javascript que utiliza 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';
Author: ftor, 2015-06-28
Source

2 answers

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

Esto dice:

Importar el por defecto exportar desde 'react' bajo el nombre Reacte importar el llamado exportar Component y PropTypes bajo 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 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 un único exportar, 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 más comúnmente, pero también sub-características adicionales, es un diseño válido para exportar la primera como predeterminada, y las restantes como exportaciones con nombre. Es en estos casos que utilizaría la sintaxis import a la que se refiere.

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

import name from "module-name";

Y said 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 "utilizado para referirse a") name, y el valor de importación en este caso es el exportación por defecto desde el módulo.

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

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

Y el ejemplo de la 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

Importa el contenido de un módulo completo, con algunos también nombrados explícitamente. Esto inserta myModule (sic), foo, y bar en el ámbito actual. Tenga en cuenta que foo y myModule.foo son los lo mismo que bar y myModule.bar

Lo que MDN dijo aquí, y lo que otras respuestas afirman basadas 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 de módulos predeterminada y algunas exportaciones con nombres explícitos. Esto inserta MyModule, foo, y bar en el ámbito actual. Los nombres de exportación foo y bar son no accesibles a través de MyModule, que es el default export, not some umbrella covering all exports.

(La exportación predeterminada del módulo es el valor exportado con la sintaxis export default, que también podría ser 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 bajo nombres tales 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 otro nombre de exportación con el nombre default. En esta sintaxis, no hay manera 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';
 155
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-29 13:41:20 
import React, { Component, PropTypes } from 'react'

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

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 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: {[14]]} 

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

Y tiene una sintaxis error.

~/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 |

Para referencia, puede leer sobre el nuevo import documentación de MDN. Sin embargo, aparentemente necesita una revisión técnica. La entrada del blog del Dr. Axel Rauschmayer es una mejor referencia por ahora.

 33
Author: royhowie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:55:01