Import CommonJS a import ES6

Question

Oto dwa przykłady użycia eksportu innego niż domyślny. Pierwsza używa składni commonjs, a druga używa es6. Dlaczego pierwszy przykład działa, ale nie drugi?

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


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

Rozumiem, że można używać import { Link } from 'react-router' zamiast, ale ja po prostu staramy się owinąć wokół głowy jak każdy przywozowych różni.

Answer 1

import ReactRouter tylko importuje domyślny eksport . Nie importuje obiektu o nazwie export, który próbujesz osiągnąć w kodzie ES6. Jeśli nie ma domyślnego eksportu w module, ten będzie undefined.

Jak podano, import { Link } from 'react-router' jest dedykowaną składnią do importowania pojedynczego o nazwie export.

Jeśli chcesz zaimportować wszystkie nazwany Eksportuje do obiektu, można użyć składni import..as:

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

MDN ma super pomocny listę wszystkich różnych rodzajów importu i jak działają .