javascript - 如何在 webpack 设置中使用 CodeMirror 运行模式独立版本

Question

我使用 CodeMirror 作为一个简单的语法高亮器(≠ 代码编辑器)和 runmode addon .为了给用户节省一些带宽，我想切换到runmode-standlone.js版本，也包含在包中，但不带完整CodeMirror附加的功率和重量。

问题，如 referenced by the library author是CodeMirror库被列为每个 mode 的依赖项(语言包):

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

有人设法做到这一点吗？

我已经尝试过的

注意，我设置了一个别名，所以当我引用 codemirror 时，它导入独立版本(仅供引用，因为我也尝试过没有它)

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

script-loader 的所有组合, imports-loader尝试将模式模块作为普通脚本执行

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

与忽略 moment.js 的建议类似的策略语言环境 ( repo , SO thread , 使用 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) {
...

所以我试图让它忽略

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

设置详细信息

使用 codemirror@5.47.0和 webpack@4.29.6

Answer 1

配置 webpack 以使用 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
}