当给出相同的结构时，为什么要求的行为与导入不同答案

【问题标题】：Why does require not behave the same as import when same structure is given当给出相同的结构时，为什么要求的行为与导入不同
【发布时间】：2018-10-27 11:33:27
【问题描述】：

对于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] }

帮助我了解为什么上面的 require 不能正常工作？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你import模块的默认导出和require模块本身。

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

【讨论】：

感谢 Ujin，这是一个非常有帮助的答案