React.js загружает файл уценки из системы в виде строки

Question

Я хотел бы загрузить файл уценки из текущего каталога в виде строки, вариант использования:

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: Требуется файл в виде строки , но, очевидно, fs был заглушен реакцией. Так что теперь я полностью озадачен тем, как я могу импортировать файл из файловой системы в виде строки. Я здесь что-то упускаю концептуально? потому что я на стороне клиента?

Answer 1

Если вы хорошо связываете текст уценки с кодом своего клиентского приложения, вы можете просто вставить raw-loader в свои настройки и указать веб-пакету применить его ко всему, заканчивающемуся совпадением /\\.md$/i, что позволит вам использовать mdParser на стороне клиента. Конечно, это предполагает, что Bio.md находится в той же папке, что и этот JS-файл во время сборки.

Если вы хотите, чтобы клиент загрузил уценку с сервера и затем проанализировал ее, вы вернулись к тому, что сказал Рохит Мурали о fetch / axios.

Редактировать: Настройка

Настроить raw-загрузчик для этого очень просто, как показано прямо в их readme :

К счастью, установка проста, в отличие от некоторых модулей, им не нужно было ничего смешного с именем.

npm install raw-loader --save-dev

Затем вы настраиваете веб-пакет для загрузки файлов уценки с помощью только что установленного загрузчика:

// 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);

Answer 2

Да. Я думаю, что вы упускаете что-то концептуально. Когда вы создаете реагирующее приложение и браузеры пользователя пытаются запустить ваш js, файловая система будет ссылаться на компьютер пользователя. Но на самом деле вам нужен файл, находящийся на статическом сервере. Можно сделать две вещи,

1. Кроме того, вы можете добавить файл в папку src и выполнить импорт
2. Или вы можете сделать вызов fetch / axios, чтобы получить файл со статического сервера, и в этом случае вы получите данные в функции обратного вызова вашего вызова fetch / axios