javascript - 为什么在给定相同结构时 require 的行为与 import 不同

Question

当涉及到 import 与 require 时，我似乎缺乏基本的理解。根据我的阅读，我知道区别在于 require 是基于像 CommonJS 这样的模块加载器，而 import 实际上是一个 ES6 特性。

假设如下:

import ExamplePost from 'example-post.md'

这是使用 MDX JS 导入的示例适当的装载机和我 在我的 React 渲染函数中设置它，例如:

render () {
  return <ExamplePost />
}

上面的工作非常好，但是因为我想动态加载不同的 Markdown 文件，而且我读过 ES6 import 是静态的，所以我打算这样做:

let postName = 'example-post'
const ExamplePost = require(`${postName}.md`)

不幸的是它不起作用，我得到:ExamplePost is not defined

我在文档顶部设置了这两个示例。我还检查了两个版本，我可以看到结果有所不同:

ES6 导入返回:[Function]

需要返回:Object [Module] { default: [Function] }

帮助我了解为什么上面的要求不一样？

Answer 1

您导入模块的默认导出并需要模块本身。

const ExamplePost = require(`${postName}.md`).default

参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

同时检查 Can't require() default export value in Babel 6.x