如何在webpack安装程序中使用CodeMirror运行模式独立版本

Question

我使用CodeMirror作为副词的简单语法高亮符(≠代码编辑器)。为了节省一些带宽给用户，我想切换到runmode-standlone.js版本，它也包括在包中，但没有带来整个CodeMirror的力量和重量附加。

问题是，正如由图书馆作者参考一样，CodeMirror库被列为每个mode ( lang包)的依赖项：

您必须以某种方式说服您的包加载运行模式-独立空间，而不是常规的核心库的依赖。-作者

有人能做到这一点吗？

我已经尝试过的

注意，我已经设置了一个别名，所以当我引用codemirror时，它会导入独立版本(只是FYI，因为我也尝试过不使用它)

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

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

1. 类似于建议忽略moment.js区域设置的策略(存储库，所以线，使用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: {
  '../lib/codemirror': 'CodeMirror', // for mode/meta.js
  '../../lib/codemirror': 'CodeMirror' // for mode/[mode]/[mode].js
}