如何在 Node 中读取本地 Markdown 文件?
How do I read a local Markdown file in Node?
我正在使用一个名为 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.js 中使用 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 不是节点的默认库吗?它应该包含在 webpack 的 package.json 中吗?即使我 运行 npm install --save fs
我仍然无法访问这些功能。 (P.S。我正在使用 create-react-app)
此外,如果我不能用fs
做到这一点,还有其他方法吗?
fs
模块没有默认导出,因此使用默认导入语法导入它是行不通的。 fs
模块仅导出命名的导出,因此将它们全部导入名称 fs
下,如下所示:
import * as fs from 'fs'
这会将所有命名的导出导入为一个名为 fs
的对象的属性。这将允许你做 fs.readFile
。更好的是,您可以使用命名导出导入来导入只是您需要的功能:
import { readFile } from 'fs'
其次,给Markdown文件传readFile
一个路径,不要直接用导入语法导入:
fs.readFile('./content/generic.md', 'utf8', (err, data) => {
...
});
除非您有正确的加载程序来导入文件,否则不要使用 require
或 import
导入它。 Node 会将其视为 JavaScript 文件并尝试将 Markdown 解释为 JavaScript。将Markdown文件的路径直接传给readFile
。还要确保将编码指定为 utf8
以获取文件的字符串内容。
我正在使用一个名为 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.js 中使用 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 不是节点的默认库吗?它应该包含在 webpack 的 package.json 中吗?即使我 运行 npm install --save fs
我仍然无法访问这些功能。 (P.S。我正在使用 create-react-app)
此外,如果我不能用fs
做到这一点,还有其他方法吗?
fs
模块没有默认导出,因此使用默认导入语法导入它是行不通的。 fs
模块仅导出命名的导出,因此将它们全部导入名称 fs
下,如下所示:
import * as fs from 'fs'
这会将所有命名的导出导入为一个名为 fs
的对象的属性。这将允许你做 fs.readFile
。更好的是,您可以使用命名导出导入来导入只是您需要的功能:
import { readFile } from 'fs'
其次,给Markdown文件传readFile
一个路径,不要直接用导入语法导入:
fs.readFile('./content/generic.md', 'utf8', (err, data) => {
...
});
除非您有正确的加载程序来导入文件,否则不要使用 require
或 import
导入它。 Node 会将其视为 JavaScript 文件并尝试将 Markdown 解释为 JavaScript。将Markdown文件的路径直接传给readFile
。还要确保将编码指定为 utf8
以获取文件的字符串内容。