如何在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以獲取文件的字符串內容。