javascript - 如何在 webpack 中填充 tinymce？

Question

我正在尝试获取 tinymce被 webpack 识别。它在 window 上设置了一个名为 tinymce 的属性，因此显然一种选择是使用这样的语法 require() 它(在底部描述webpack 文档的EXPORTING section):

require("imports?window=>{}!exports?window.XModule!./file.js

但是在这个例子中，./file.js 是如何解析的呢？我通过 npm 安装了 tinymce，但我不知道如何指定 tinymce.js 文件的正确路径。

无论如何，我宁愿在我的配置中处理这个问题，如果可能的话，我只能 require('tinymce')，所以我已经安装了 exports-loader并将以下内容添加到我的配置中(基于 this discussion):

module: {
    loaders: [
        {
            test: /[\/]tinymce\.js$/,
            loader: 'exports?tinymce'
        }
    ]
}

很遗憾，这不起作用。我的配置有什么问题？

Answer 1

npm 上的 tinymce 模块不能直接需要，但包含 4 个不同的库分布。即:

• tinymce/tinymce.js
• tinymce/tinymce.min.js
• tinymce/tinymce.jquery.js
• tinymce/tinymce.jquery.min.js

为了能够在您的代码中执行 require('tinymce')，您可以添加 an alias在您的 webpack 配置中，以及供您选择的分发版的自定义加载器。

resolve: {
  alias: {
    // require('tinymce') will do require('tinymce/tinymce') 
    tinymce: 'tinymce/tinymce',
  },
},
module: {
  loaders: [
    {
      // Only apply on tinymce/tinymce
      include: require.resolve('tinymce/tinymce'),
      // Export window.tinymce
      loader: 'exports?window.tinymce',
    },
  ],
},

您可以将 tinymce/tinymce 替换为您选择的发行版。