Question

我有几个.md文件（包含长文本），我想通过反应来渲染它们。我尝试使用markown-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

Answer 2

如果有人还在寻找一种方法，我只是发布了一个处理这个问题的webpack加载器。

React Markdown

如何渲染foo.md降价文件？

2 个答案: