如何在 react 中渲染一个 foo.md 降价文件

Question

我有几个.md文件（包含长文本），我想通过react渲染它们。我尝试使用 markedown-it，但加载程序返回错误。以下是 webpack.config.js 文件：

var path = require('path');
var webpack = require('webpack');
var subscript = require('markdown-it');
var superscript = require('markdown-it');
module.exports = {
    entry: ['./src/first.jsx'],
    devtool: 'cheap-module-eval-source-map',
    output: { path: __dirname+"/app", filename: 'bundle.js' },
    module: {
        loaders: [
            {   test: /.jsx?$/,
                loader: 'babel-loader',
                query: { presets: ['es2015', 'react'] },
                include: path.join(__dirname, 'src')
            },
            {   test:   /.md/,
                loader: 'markdown-it'
            }
        ]
    },
    'markdown-it': {
        preset: 'default',
        typographer: true,
        use: [subscript, superscript]
    }
};

该文件有问题吗？我还能如何添加我的 *.md 文件来做出反应？

阅读 http://www.shoutinginfrench.com/today-i-made-react-load-markdown/后，我尝试使用markdown-loader。之后，我将其添加到 webpack.config 文件中：

{   test: /.md$/,
   loader: "html!markdown"
}

这没有问题。然后我尝试将 markdown 文件添加到 react 组件中，如下所示：

import React from 'react';
import { Link } from 'react-router'
import markdownFile from './test-file.md';
 export const Test = React.createClass({
    rawMarkup(){
         return { __html: markdownFile };
     },
     render() {
         return (
             <div className="something">
                 <div className="row">
                     <div className="col-10">
                         <div dangerouslySetInnerHtml={this.rawMarkup()} />
                     </div>
                 </div>
             </div>
         );
     }
 });

但是我收到以下错误：

ERROR in ./src/components/tst.jsx
Module not found: Error: Cannot resolve module 'html' in /Users/..../src/components
 @ ./src/components/tst.jsx 14:15-39

我该如何解决？！

Answer 1

将{ test: /.md$/, loader: "html!markdown" },{ test: /.json$/, loader: "json" }添加到您的 webpack.config.js .

npm install react-markdown --save-dev