2016-05-05 27 views
6

Ecco due esempi di utilizzo di un'esportazione non predefinita. Il primo utilizza la sintassi commonjs e il secondo utilizza es6. Perché funziona il primo esempio, ma non il secondo?Importazioni CommonJS vs importazioni ES6

// commonjs --- works! 
var ReactRouter = require('react-router') 
var Link = ReactRouter.Link 


// es6 --- doesn't work! 
import ReactRouter from 'react-router' 
var Link = ReactRouter.Link 

ho capito che posso usare import { Link } from 'react-router' invece, ma sto solo cercando di avvolgere la mia testa intorno a come ognuno è diverso importazione.

+1

Penso che anche tu abbia un refuso nel CommonJS, non dovrebbe essere "var Link = ReactRouter.Link'? – CodingIntrigue

+0

Sì, anche se questo non era il problema – Jonny

risposta

8

import ReactRouter importa solo l'esportazione predefinita . Non importa un oggetto di esportazioni nominate, che è ciò che stai cercando di ottenere nel tuo codice ES6. Se non esiste alcuna esportazione predefinita nel modulo, questo sarà undefined.

Come indicato, import { Link } from 'react-router' è la sintassi dedicata per l'importazione di un singolo con nome esportazione.

Se si desidera importare tutte le esportazioni nome in un oggetto, è possibile utilizzare il import..as sintassi:

import * as ReactRouter from 'react-router'; 
var Link = ReactRouter.Link 

MDN ha una lista super-utile di tutti i diversi tipi di importazione e come funzionano .

+0

Quindi 'var ReactRouter = require ('react-router')' è equivalente a 'import * come ReactRouter da' react-router''? – Jonny

+1

@Jonny Esattamente. – CodingIntrigue

Problemi correlati