usando corchetes con sintaxis de importación de JavaScript

Resuelto fox asked hace 9 años • 2 respuestas

Encontré una biblioteca de 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';
fox avatar Jun 28 '15 12:06 fox
Aceptado
import React, { Component, PropTypes } from 'react';

Esto dice:

Importe la exportación predeterminada'react' bajo el nombre Reacte importe las exportaciones nombradasComponent y PropTypesbajo 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 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 importa 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 hace referencia.

Las otras respuestas están 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 "usado para hacer referencia 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 precisamente 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 completo de un módulo, y algunos también se nombrarán explícitamente. Esto inserta myModule(sic), fooy baren el alcance actual. Tenga en cuenta que fooy myModule.fooson iguales, al igual que barymyModule.bar

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

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

Es posible que los redactores de la documentación de MDN se hayan confundido con el siguiente formulario:

import * as MyModule from 'my-module';

Esto importa todas las exportaciones desde my-moduley las hace accesibles con nombres como MyModule.name. También se puede acceder a la exportación predeterminada como MyModule.default, ya que la exportación predeterminada en realidad no es más que otra exportación 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 la hay, junto con todas las exportaciones nombradas, con

import myModuleDefault, * as myModule from 'my-module';
avatar Jun 28 '2015 09:06 
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 una 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.

royhowie avatar Jun 28 '2015 06:06 royhowie