How to use CodeMirror runmode standalone version in a webpack setup

Question

I'm using CodeMirror as a simple syntax highlighter (≠ code editor) with the runmode addon. In order to save some bandwidth to users, i want to switch to runmode-standlone.js version, which is also included in the package but doesn't bring the whole CodeMirror power and weight attached.

The problem, as referenced by the library author is that CodeMirror library is listed as dependency of each mode (the lang packages):

you have to somehow convince your bundler to load the runmode-standalone shim instead of the regular core library for that dependency. — Author

Anyone managed to do this?

What i've already tried

Note, i've setup an alias so when i reference codemirror, it imports the standalone version (just FYI, because i've also tried without it)

// webpack.config.js
resolve: {
  alias: {
   codemirror$: path.resolve(__dirname, "node_modules/codemirror/addon/runmode/runmode-standalone.js")
  }
}

All combinations of script-loader, imports-loader to try to execute mode modules as normal scripts

import "codemirror";
// same as import "codemirror/addon/runmode/runmode-standalone.js";

// nope
import "script-loader!codemirror/mode/javascript/javascript";

// nope
import "imports-loader?define=>false!codemirror/mode/javascript/javascript";

// nope
import "imports-loader?define=>false,module=>false,require=>false!codemirror/mode/javascript/javascript";

A similar strategy to what's suggested for ignoring moment.js locales (repo, SO thread, using webpackIgnorePlugin

// codemirror/mode/javascript/javascript.js import looks like

(function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
    mod(require("../../lib/codemirror"));
  else if (typeof define == "function" && define.amd) // AMD
    define(["../../lib/codemirror"], mod);
  else // Plain browser env
    mod(CodeMirror);
})(function(CodeMirror) {
...

So i've tried to make it ignore

new webpack.IgnorePlugin({
  resourceRegExp: /^\.\.\/lib\/codemirror$/,
  contextRegExp: /^codemirror\/mode\/(.*)/
});

Setup details

Using codemirror@5.47.0 and webpack@4.29.6

score 0 · Answer 1 · answered Jul 01 '20 at 22:42

Configure webpack to use externals.

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment.

externals: {
  '../lib/codemirror': 'CodeMirror', // for mode/meta.js
  '../../lib/codemirror': 'CodeMirror' // for mode/[mode]/[mode].js
}

How to use CodeMirror runmode standalone version in a webpack setup

What i've already tried

Setup details

1 Answers1