Question

我想从当前目录以字符串的形式加载markdown文件，用例：

import { State } from "markup-it"             ;
import markdown  from "markup-it/lib/markdown";
import bio  from './Bio.md'


const mdParser = State.create(markdown);
const bio_o = mdParser.deserializeToDocument(bio);


// tried this next: but cannot import files system because react stubbed it out
const fs = require('fs');

当我import bio from './Bio.md'时，我得到文件的路径，而不是字符串格式。因此，接下来我尝试使用文件系统fs a la：require file as string，但是显然fs已经被React淘汰了。因此，现在我对于如何从文件系统中以字符串形式导入文件完全感到困惑。我在概念上在这里错过什么吗？是因为我在客户端吗？

Answer 1

是的。我认为您在概念上缺少某些东西。当您构建React应用程序并且用户的浏览器尝试运行js时，文件系统将引用用户的计算机。但是，您真正想要的是驻留在静态服务器中的文件。可以完成两件事，

此外，您可以将文件添加到src文件夹并进行导入
或者您可以执行fetch / axios调用以从静态服务器中获取文件，在这种情况下，您将在fetch / axios调用的回调函数中获取数据

Answer 2

如果您可以将降价文字与客户端应用程序代码捆绑在一起，则只需将raw-loader放入您的设置中，并告诉webpack将其应用于以/\\.md$/i结尾的任何内容，您在客户端使用mdParser。当然，这假设Bio.md在构建期间与此JS文件位于同一文件夹中。

如果您希望客户端从服务器加载减价并对其进行解析，那么您将回到Rohith Murali所说的fetch / axios。

编辑：设置

设置原始加载器来完成此操作非常简单，如right in their readme所示：

值得庆幸的是，安装很简单，与某些模块不同，它们不需要对名称做任何有趣的事情。

npm install raw-loader --save-dev

然后，您将webpack配置为使用新安装的加载程序加载markdown文件：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // new rule: anything ending with ".md" is loaded with raw-loader
      {
        test: /\.md$/i,
        use: 'raw-loader'
      },
      // any other rules...
    ],
    // ...
  },
  // ...
}

然后像往常一样导入您的MD文件并获取一个字符串：

import bio from './Bio.md';
const bio_o = mdParser.deserializeToDocument(bio);

React.js从系统作为字符串

2 个答案:

编辑：设置