2016-02-19 2 views
1

У меня есть несколько файлов .md (содержащие длинные тексты), и я хочу, чтобы их отредактировать через реакцию. Я попытался использовать labelened-it, но загрузчик возвращает ошибку. Вот файл webpack.config.js:Как отредактировать файл уценки foo.md?

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/ Я попытался использовать уцензурный загрузчик. После этого я добавил это в файл webpack.config:

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

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

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 

Как я могу это исправить ?!

+0

Где ошибка? – Kreozot

+0

И почему вы не используете markdown-ir-sub и markdown-it-sup? – Kreozot

+0

Погрузчик - это правильный способ сделать это. Можете ли вы дать нам больше информации об ошибке, которую вы получаете? Трассировки стека? –

ответ

0

если кто-то все еще ищут способ сделать это, я просто опубликовал WebPack загрузчика, который имеет дело с этим ..

React Markdown

1

{ test: /\.md$/, loader: "html!markdown" },{ test: /\.json$/, loader: "json" } добавить к вашему webpack.config.js.

npm install react-markdown --save-dev 
+2

Вместо этого вы захотите установить пакет «markdown-loader». Также убедитесь, что у вас есть 'html-loader', чтобы это работало – patmood

Смежные вопросы