Come richiedere la modalità, il tema o l'addon del mirror del codice in browserify

Question

Qualcuno tenta di utilizzare il mirror del codice tramite browserify?

Non trovo nulla visibile, anche se ha già generato tutti i tag html.

Il codice:

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

mi chiedo come dovrebbero richiedere la modalità js?

Answer 1

Io in realtà occupava con questo problema utilizzando require() per tutte le dipendenze della manifestazione di html5complete mode demo così:

// 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' 
}); 

nei miei file .less, ho importato il CSS del genere:

@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"; 

Non mi sono preso veramente cura della qualità di quel trucco.

Answer 2

Ecco cosa funziona per me. Utilizzando l'importazione invece di richiedere, ma lo stesso succo:

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}/>