CommonJS 导入与 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 有一个非常有用的列表，列出了所有不同类型的导入及其工作原理。

CommonJS 导入与 ES6 导入

CommonJS imports vs ES6 imports

import

commonjs

ecmascript-6

reactjs