CommonJS导入vs ES6导入

Question

以下是使用非默认导出的两个示例.第一个使用commonjs语法,第二个使用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

我明白我可以使用import { Link } from 'react-router',但我只是试图了解每个导入的不同之处.

Answer 1

import ReactRouter仅导入默认导出.它不会导入您在ES6代码中尝试实现的命名导出对象.如果在模块中没有默认的出口,这ReactRouter将是undefined.

如上所述,import { Link } from 'react-router'是导入单个命名导出的专用语法.

如果要将所有命名导出导入到对象中,可以使用以下import..as语法:

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

MDN有一个超级有用的列表,列出了所有不同类型的导入及其工作方式.