CommonJS 导入与 ES6 导入

IT技术 reactjs import ecmascript-6 commonjs
2021-05-10 21:28:56

以下是使用非默认导出的两个示例。第一个使用 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'改用,但我只是想弄清楚每个导入的不同之处。

1个回答

import ReactRouter只导入默认的 export它不会导入命名导出的对象,而这正是您试图在 ES6 代码中实现的目标。如果module中没有默认导出,这ReactRouter将是undefined.

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

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

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

MDN有一个非常有用的列表,列出了所有不同类型的导入及其工作原理。