javascript - Webpack 库间依赖如 requireJS.config.shim 中

Question

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

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

我们特别指出工具提示依赖于 jquery，因此首先加载 jquery。弹出窗口取决于工具提示，因此请提前加载工具提示。

如何将此配置转换为 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 ...” 因此工具提示库不会在弹出窗口之前加载。 我也没有看到 webpack 添加任何新代码，我认为这可能是我的第一个问题，因为 import-loader 应该将指定的库添加到 popover 模块中，对吗？

我确实看到了我的方法有什么问题，并且耗尽了很多在线资源。我确信以前有人处理过此类问题，请为我遮挡一些光线。谢谢!

Answer 1

您应该在 resolve.alias 部分提供 tooltip 和 popover:

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

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