如何在 browserify 中要求代码镜像的模式、主题或插件答案

【问题标题】：How to require mode, theme or addon of code mirror in browserify如何在 browserify 中要求代码镜像的模式、主题或插件
【发布时间】：2014-11-01 04:14:03
【问题描述】：

有没有人尝试通过 browserify 使用代码镜像？

我发现没有任何东西是可见的，即使它已经生成了所有的 html 标签。

代码：

var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript.js');

  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    extraKeys: {
      "Ctrl-Space": "autocomplete"
    },
    mode: {
      name: "javascript",
      globalVars: true
    }
  });

我想知道我应该如何要求js模式？

【问题讨论】：

正如代码镜像项目在其自述文件中所述：Use codemirror instead, it now supports CommonJS environments

标签： javascript npm browserify codemirror

【解决方案1】：

我实际上是通过对html5complete mode demo 演示的所有依赖项使用 require() 来解决这个问题的：

// require('codemirror/addon/hint/show-hint');
// require('codemirror/addon/hint/xml-hint');
// require('codemirror/addon/hint/html-hint');

require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/css/css');
require('codemirror/mode/htmlmixed/htmlmixed');

var CodeMirror = require('codemirror/lib/codemirror');

var editor = CodeMirror.fromTextArea(textareaElement, {
  mode: 'text/html',
  lineWrapping: true,
  extraKeys: {
    'Ctrl-Space': 'autocomplete'
  },
  lineNumbers: true,
  theme: 'monokai'
});

在我的 .less 文件中，我像这样导入了 CSS：

@import (inline) "./../../node_modules/codemirror/lib/codemirror.css";
@import (inline) "./../../node_modules/codemirror/theme/monokai.css";
// @import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css";

我并没有真正在意那个技巧的质量。

【讨论】：

【解决方案2】：

这对我有用。使用 import 而不是 require，但要点相同：

import 'codemirror/theme/3024-night.css'

const options = {
      lineNumbers: true,
      readOnly: false,
      mode: 'htmlmixed',
      theme:'3024-night'
};

...


<Codemirror ref="editor" value={this.props.value} onChange={this.props.updateCode} options={options}/>

【讨论】：