如何在Node中读取本地Markdown文件？

Question

我正在使用一个名为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')
);

该库的演示仅讨论将Markdown字符串创建为变量，而不是本地文件。 我要做的显而易见的事就是在Node中使用fs 。 所以我写了以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';
import * as fs from 'fs';
import content from './content/generic.md';

fs.readFile(content, (err, data) => {
  if (err) throw err;
  console.log(data);
});

在我可以为ReactMarkdown元素提供内容之前，Webpack抱怨readFile不是一个函数！

具体来说，它突出显示fs.readFile行并说：

TypeError: __WEBPACK_IMPORTED_MODULE_5_fs___default.a.readFile is not a function

如果我使用import {readFile } from 'fs'会发生同样的错误，当我使用fs.stat或fs.open时也会发生这种错误。 fs不是节点的默认库吗？ 它应该包含在package.json中用于webpack吗？ 即使我运行npm install --save fs我仍然无法访问这些功能。 （PS我正在使用create-react-app）

而且，如果我不能用fs做这个，还有另一种方法吗？

Answer 1

fs模块没有默认导出，因此使用默认导入语法导入它将不起作用。 fs模块只导出命名导出，因此以名称fs导入所有这些导出，如下所示：

import * as fs from 'fs'

这将导入所有命名导出作为名为fs的一个对象的属性。 这将允许你做fs.readFile 。 更重要的是，你可以使用命名导入导出导入你需要的功能：

import { readFile } from 'fs'

其次，将readFile传递给Markdown文件的路径 ，不要直接使用导入语法导入它：

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

除非您有正确的加载程序来导入文件，否则请不要使用require或import导入它。 Node会将其视为JavaScript文件，并尝试将Markdown解释为JavaScript。 将Markdown文件的路径直接传递给readFile 。 还要确保将编码指定为utf8以获取文件的字符串内容。