2

我正在尝试使用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) ...
};
...

这一切的结果如下：

错误配置的 codemirror 的屏幕截图

正如你所看到的，没有语法高亮并且段落结尾（以及光标结尾）有奇怪的 A^ 字符。我不知道发生了什么。

我试图解决这个问题的一些更相关的事情：

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

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

非常感谢调试此问题的任何帮助！（如果您需要更多信息，请告诉我）

4

0 回答 0