CodeMirror无法与React/Webpack配合使用。

Question

我正在为我的React项目开发一些Markdown编辑器。我想使用CodeMirror作为代码编辑器，但在使用webpack构建时似乎无法工作。

说实话，CodeMirror在DOM树中，但是文本区域被隐藏了，但我看到的只有：

以及

更新：相同的代码在CodePen上完美地工作。我猜这是webpack的问题。

一些代码:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import {Editor} from './components';

const rootElement = document.getElementById('root');

ReactDOM.render(<Editor />, rootElement);

components/editor.js

import React, { Component } from 'react';
import cm from 'codemirror';
require('codemirror/mode/markdown/markdown');

export class App extends Component {
  componentDidMount() {
    this.codeMirror = cm.fromTextArea(this.refs.editor, {mode: 'markdown'})
  }
  render() {
    return (
      <div>
        <textarea ref='editor' autoComplete='off' defaultValue='default value' />
      </div>
    );
  }
}

server.js

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var HOST = 'localhost';
var PORT = 3000;

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));


app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, '/app/index.html'));
});

app.listen(PORT, HOST, function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://' + HOST + ':' + PORT);
});

以及webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './app/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'app')
    }]
  }
};

- Terry Sahaidak

---

请查看react-codemirror2，了解在React中的使用方法。 - scniro

Answer 1

在 webpack gitter chat 中，@bebraw 回答了我的问题：

Codemirror 可以与 webpack 一起使用，但需要一些额外的设置。您需要引入一些 css 等内容才能进行渲染。这里有一个示例

- Terry Sahaidak

---

我希望你能够给出实际的回答，因为我仍然找不到解决方案，而且我的问题与你完全相同。 - Andrew

是的，这是一个实际的答案。你只需要在入口文件中导入一些codemirror的css，就像在示例中所做的那样 import 'codemirror/lib/codemirror.css'; import 'codemirror/theme/monokai.css';。你还应该使用style-loader来加载这个css。 - Terry Sahaidak

如果启用了热重载（HMR），我也遇到了同样的问题。唯一的解决办法是禁用热重载。至今仍不清楚原因。 - Arnaud Valensi

这是一个使用codemirror + webpack的示例：https://github.com/webpack/playground，同时也可以查看react-toolbox文档文件夹：https://github.com/react-toolbox/react-toolbox/blob/dev/docs/app/components/editor/index.jsx - Vasiliy Yorkin