React Codemirror + Browserify不呈现htmlmixed模式

Question

我正在尝试使用react-codemirror在表单中显示一大块html，但由于某种原因，我无法让codemirror表现出来。在切换到react-codemirror之前，我遇到了与browserify + vanilla codemirror相同的问题，所以我几乎肯定问题在于我如何设置我的构建。

首先，React组件：

CodeMirror = require('react-codemirror');
require('codemirror/mode/htmlmixed/htmlmixed');

... (other react code) ...

render: function() {
    return (
        ... (jsx elements) ...
        <CodeMirror ref="editor"
                    value={this.props.slide.html}
                    autoSave={true}
                    options={{
                        mode: 'htmlmixed',
                        lineWrapping: true,
                        lineNumbers: true
                    }}>
        </CodeMirror>
    );
}

然后，gulpfile.js（我正在使用gulp来构建browserify包）：

...
var libs = [
    "auth0-lock",
    "codemirror",
    "debug",
    "fluxible",
    "form-serializer",
    "hammerjs",
    "history",
    "jquery",
    "mousetrap",
    "object-assign",
    "promise",
    "react",
    "react-codemirror",
    "react-dom",
    "serialize-javascript",
    "validator"
];

var tasks = {
    ... (task definitions) ...
    vendors: function() {
        var bundler = browserify({
            debug: true,
            fullPaths: !production
        });

        // Loop over the libs and expose them
        libs.forEach(function(lib) {
            bundler.require(lib, { expose: lib });
        });

        var start = new Date();
        console.log('LIB bundle started at ' + start);
        return bundler.bundle()
                        .on('error', handleError('Browserify'))
                        .pipe(source('libs.js'))
                        .pipe(gulp.dest('public/js/'))
                        .pipe(notify(function() {
                            console.log('LIB bundle built in ' + (Date.now() - start) + 'ms');
                        }));
    },
    ... (more task definitions) ...
};
...

所有这一切的结果如下：

正如您所看到的，没有语法突出显示AND段落结尾（以及光标结尾）具有奇怪的A ^字符。我不知道发生了什么。

我尝试解决此问题的一些更相关的事情：

• 导入codemirror后，将require('codemirror/mode/xml/xml'); require('codemirror/mode/css/css'); require('codemirror/mode/javascript/javascript');添加到React文件中。行为没有变化。

• 将'codemirror/mode/htmlmixed/htmlmixed'和'codemirror/mode/xml/xml', 'codemirror/mode/css/css', 'codemirror/mode/javascript/javascript'包含在gulpfile中的libs变量中。失败时出现错误，表明浏览器无法解析模式文件中的require('../../lib/codemirror')。我找不到摆脱错误的好方法。除了这个问题，我注意到我的libs.js是使用模式文件构建的，无论我将模式位置字符串添加到libs变量。这向我表明模式虽然包含在内，但却错误地包含在libs.js文件中？如果是这样，我无法想象为什么当'codemirror'变量中只有libs时，浏览器控制台没有显示错误。

任何有关调试此问题的帮助将不胜感激！ （如果您需要更多信息，请告诉我）