requireJS.config.shim 中的 Webpack 库间依赖

Question

我正在将 grunt + requireJS 构建过程转换为 webpack。我们有这样的东西：

require.config({
  shim:{
    'popover': {
        deps: ['tooltip']
      },
    'tooltip': {
      deps: ['jquery']
    }
  }    
})

我们特别指出工具提示取决于 jquery，因此请先加载 jquery。 Popover 取决于工具提示，因此请预先加载工具提示。

如何将此配置转换为 webpack 4？我在网上搜索过，想看看是否有足够相似的东西。 Webpack 的 shimming 不做库间依赖。我也没有在文档中看到任何内容……这让我很惊讶。

我找到了文章 (https://gist.github.com/xjamundx/b1c800e9282e16a6a18e) 建议使用 import-loader 来达到这样的效果。所以我的配置是这样的：

    module:{
        strictExportPresence:true,
        rules:[
            { parser: { requireEnsure: false } },
            { oneOf:[...bunch of stuffs for different file types] },
            { test : /tooltip/, loader: 'imports-loader?$=jquery' },
            { test : /popover/, loader: 'imports-loader?tooltip' }
        ]

在配置设置中也有适当的别名。

我得到的错误是浏览器在线未定义构造函数 "Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype ..." 所以在 popover 之前没有加载工具提示库。我也没有看到 webpack 添加的任何新代码，我认为这可能是我的第一个问题，因为 imports-loader 应该将指定的库添加到 popover 模块中，对吗？

我终于明白我的方法有什么问题了，并且耗尽了很多在线资源。我确定以前有人必须处理此类问题，请为我遮光。谢谢！

Answer 1

您应该在 resolve.alias 部分提供 [=11=] 和 popover：

resolve: {
    alias: {
        "jquery": "lib/jquery-x.x.x",
        "tooltip": "lib/tooltip-x.x.x",
        "popover": "lib/popover-x.x.x"
    }           
}

否则 webpack 将无法通过 imports-loader 解析要填充的模块。另外，请注意您在配置中拼写错误 imports-loader。

requireJS.config.shim 中的 Webpack 库间依赖

Webpack inter-library dependency as in requireJS.config.shim

javascript

webpack

requirejs

frontend

webpack-4