Javascript 如何读取节点中的本地标记文件？

我正在使用一个名为

react markdown

的库。如果您知道React，那么它的实现非常简单

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';

var content = '# This is a header\n\nAnd this is a paragraph';

ReactDOM.render(
  <ReactMarkdown source={content} />,
  document.getElementById('root')
);

在我为

ReactMarkdown

元素提供内容之前，Webpack抱怨

readFile

不是一个函数

具体来说，它突出显示了

fs.readFile

行，并指出：

TypeError: __WEBPACK_IMPORTED_MODULE_5_fs___default.a.readFile is not a function

如果我从“fs”使用

import{readFile}

时会发生同样的错误，当我使用fs.stat或fs.open时也会发生同样的错误。fs不是节点的默认库吗？是否应将其包含在Web包的package.json中？即使我运行

npm安装--save fs

我仍然无法访问这些函数。（请注意，我正在使用create react应用程序）

---

此外，如果我不能用

fs

执行此操作，是否还有其他方法？

该

fs

模块没有默认导出，因此使用默认导入语法导入它将不起作用。

fs

模块仅导出命名的导出，因此将所有导出导入到

fs

名称下，如下所示：

import * as fs from 'fs'

这将把所有命名的导出作为名为

fs

的一个对象的属性导入。这将允许您执行

fs.readFile

。更好的是，您可以使用命名的导出导入来导入所需的函数：

import { readFile } from 'fs'

其次，将

readFile

路径传递到标记文件，不要使用导入语法直接导入它：

fs.readFile('./content/generic.md', 'utf8', (err, data) => {
    ...
});

---

除非您有正确的加载程序来导入文件，否则不要使用

require

或

import

导入文件。节点将把它当作一个JavaScript文件，并尝试将标记解释为JavaScript。将标记文件的路径直接传递到

readFile

。还要确保将编码指定为

utf8

，以获取文件的字符串内容。

fs模块没有默认导出，因此使用默认导入语法导入它将不起作用。

fs

模块仅导出命名的导出，因此将所有导出导入到

fs

名称下，如下所示：

import * as fs from 'fs'

这将把所有命名的导出作为名为

fs

的一个对象的属性导入。这将允许您执行

fs.readFile

。更好的是，您可以使用命名的导出导入来导入所需的函数：

import { readFile } from 'fs'

其次，将

readFile

路径传递到标记文件，不要使用导入语法直接导入它：

fs.readFile('./content/generic.md', 'utf8', (err, data) => {
    ...
});

---

除非您有正确的加载程序来导入文件，否则不要使用

require

或

import

导入文件。节点将把它当作一个JavaScript文件，并尝试将标记解释为JavaScript。将标记文件的路径直接传递到

readFile

。还要确保将编码指定为

utf8

，以获取文件的字符串内容。

感谢Andrew提供了正确答案和编辑。我想我仍然需要建立一个承诺，以便React元素在fs.readFile完成之前不会尝试渲染，因为现在，即使您的答案有效，我仍然从React收到一条消息，即

内容
未定义
您可以使用
readFile
并设置回调（作为第三个参数）在读取文件后设置状态。这样，一旦读取完文件，它就会重新启动组件。感谢Andrew给出的正确答案和编辑。我想我仍然需要建立一个承诺，以便React元素在fs.readFile完成之前不会尝试渲染，因为现在，即使您的答案有效，我仍然从React收到一条消息，即
内容
未定义
您可以使用
readFile
并设置回调（作为第三个参数）在读取文件后设置状态。这样，一旦读取完文件，它就会重新加载组件。。。交换条件。。。你说的每句话对我来说都很有意义，我认为它曾经奏效过，但现在我又回到了同样的错误。如果我使用
import{readFile}从'fs'
导入，它会说readFile不是一个函数。如果我使用
import*作为“fs”中的fs
我会得到原始错误
fs\uuu。readFile不是一个函数
我甚至使用了
npm安装-保存fs
-你不应该这样做，但仍然没有任何结果。值得注意的一件奇怪的事情是，终端将“编译成功”——是Chrome注册了错误。@russellmania这取决于您在哪里运行代码。浏览器无法访问文件系统，
fs
模块仅在节点环境中工作。它不存在于节点外部。如果你是为网络而捆绑，也许可以看看这个软件包。这是完全相同的代码，但包名为
browserify fs
，并且与web兼容。@russellmania所以，即使在节点环境中，
fs
也不起作用？我明白你的意思。真的，我想我想要的是将外部降价文件包含在从webpack出来的产品包中，然后让React对该文件进行降价访问，我想这是一个ajax调用。@russellmania如果您使用的是
browserify fs
，它使用的包不支持
fs.read
，
fs.open
，或
fs.stat
。要使用所有的
fs
，您需要在节点环境中，因为浏览器无法访问文件系统。。。交换条件。。。你说的每句话对我来说都很有意义，我认为它曾经奏效过，但现在我又回到了同样的错误。如果我使用
import{readFile}从'fs'
导入，它会说readFile不是一个函数。如果我使用
import*作为“fs”中的fs
我会得到原始错误
fs\uuu。readFile不是一个函数
我甚至使用了
npm安装-保存fs
-你不应该这样做，但仍然没有任何结果。值得注意的一件奇怪的事情是，终端将“编译成功”——是Chrome注册了错误。@russellmania这取决于您在哪里运行代码。浏览器无法访问文件系统，并且只能访问
fs
模块