web-dev-qa-db-fra.com

utiliser des crochets avec la syntaxe d'importation javascript

Je suis tombé sur une bibliothèque javascript qui utilise la syntaxe suivante pour importer des bibliothèques:

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

Quelle est la différence entre la méthode ci-dessus et la suivante?

import React, Component, PropTypes from 'react';
javascriptecmascript-6es6-modules
107
fox
import React, { Component, PropTypes } from 'react';

Cela dit:

Importer le valeur par défaut exporter de 'react' sous le nom React et importez le nommé exporte Component et PropTypes sous les mêmes noms.

Ceci combine les deux syntaxes courantes que vous avez probablement déjà vues

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

Le premier étant utilisé pour importer et nommer l'exportation par défaut, le second pour importer les exportations nommées spécifiées.

En règle générale, la plupart des modules fournissent soit une exportation unique, par défaut, soit une liste d'exportations nommées. Il est un peu moins habituel pour un module de fournir à la fois une exportation par défaut et exportations nommées. Toutefois, dans le cas où il existe une fonctionnalité importée le plus souvent, mais également des sous-fonctionnalités supplémentaires, il est judicieux d'exporter la première comme valeur par défaut et les autres comme des exportations nommées. Dans ce cas, vous utiliseriez la syntaxe import à laquelle vous vous référez.

Les autres réponses sont à la fois erronées et déroutantes, peut-être parce que les documents MDN au moment où cette question a été posée étaient faux et déroutants. MDN a montré l'exemple

import name from "module-name";

et dit name est le "nom de l'objet qui recevra les valeurs importées". Mais c'est trompeur et incorrect; Tout d’abord, il n’ya que n valeur d’importation, qui sera "reçue" (pourquoi ne pas simplement dire "affecté à", ou "utilisé pour désigner") name, et la valeur d'importation dans ce cas est le exportation par défaut du module.

Une autre façon d’expliquer cela est de noter que l’importation ci-dessus est précisément identique à

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

et l'exemple du PO est précisément identique à

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

La documentation MDN a ensuite montré l'exemple

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

et a affirmé que cela signifie

Importez le contenu d'un module entier, certains étant également nommés explicitement. Ceci insère myModule (sic), foo et bar dans la portée actuelle. Notez que foo et myModule.foo sont les mêmes, tout comme bar et myModule.bar

Ce que MDN a dit ici et ce que d’autres réponses prétendent sur la base d’une documentation MDN incorrecte sont tout à fait faux et peuvent être basés sur une version antérieure de la spécification. Qu'est-ce que cela fait, c'est

Importez l'exportation de module par défaut et certaines exportations explicitement nommées. Ceci insère MyModule, foo et bar dans la portée actuelle. Les noms d'exportation foo et bar ne sont pas accessibles via MyModule =, qui est l'exportation par défaut , et non un parapluie couvrant toutes les exportations.

(L’export de module par défaut est la valeur exportée avec le export default _ syntaxe, qui pourrait aussi être export {foo as default}.)

Les auteurs de la documentation MDN ont peut-être été confondus avec le formulaire suivant:

import * as MyModule from 'my-module';

Cela importe toutes les exportations de my-module, et les rend accessibles sous des noms tels que MyModule.name. L'exportation par défaut est également accessible en tant que MyModule.default, puisque l’exportation par défaut n’est en réalité rien de plus qu’une autre exportation nommée avec le nom default. Dans cette syntaxe, il n’existe aucun moyen d’importer uniquement un sous-ensemble des exportations nommées, bien que l’export par défaut puisse être importé, s’il en existe un, ainsi que toutes les exportations nommées, avec

import myModuleDefault, * as myModule from 'my-module';
165
user663031
import React, { Component, PropTypes } from 'react'

Cela va récupérer les membres { Component, PropTypes } Exportés du module 'react' Et les attribuer à Component et PropTypes, respectivement. React sera égal à l'export default du module.

Comme noté par torazaburo ci-dessous , ceci est identique à

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

qui est un raccourci pour

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

Voici un autre exemple ( lien vers 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...'

J'ai testé le deuxième exemple avec babel:

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

et a une erreur de syntaxe.

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

Pour référence, vous pouvez lire la nouvelle documentation import de MDN. Cependant, il a apparemment besoin d'un examen technique. Le blog du Dr Axel Rauschmayer est une meilleure référence pour le moment.

37
royhowie