Gulp 反应代码镜像+；Browserify不呈现htmlmixed模式

我试图使用

react codemirr

在表单中显示一块html，但由于某些原因，我无法让codemirr正常工作。在切换到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>
    );
}

所有这些的结果如下：

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

我试图解决此问题的一些更相关的问题：

• 外接程序

  require（'codemrror/mode/xml/xml'）；要求（“代码镜像/模式/css/css”）；需要（'codemirr/mode/javascript/javascript'）添加到React文件。行为没有改变
  

• 将

  'codemirr/mode/htmlmixed/htmlmixed'

  以及

  'codemirr/mode/xml/xml'，'codemirr/mode/css/css'，'codemirr/mode/javascript/javascript'

  包含到gulpfile中的

  libs

  变量中。该操作失败，错误表明浏览器无法解析模式文件中的

  require（'../../lib/codemirr'）

  。我找不到消除错误的好方法。除了这个问题，我注意到我的

  libs.js

  是用模式文件构建的，而不管我在libs变量中添加了模式位置字符串。这向我表明，这些模式虽然包含在libs.js文件中，但没有正确地包含在libs.js文件中？如果是这样，我无法想象为什么浏览器控制台在

  libs

  变量中只有

  'codemirr'

  时没有显示错误

---

在调试这个问题上的任何帮助都将不胜感激！（如果您需要更多信息，请务必告诉我）

我不再使用codemirror。然而，我把这个问题留给别人，以防有人知道发生了什么，并想给另一个有这个问题的可怜的灵魂留下提示

...
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) ...
};
...