Межбиблиотечная зависимость Webpack, как в requireJS.config.shim - PullRequest
0 голосов
/ 26 ноября 2018

Я конвертирую процесс сборки grunt + requireJS в webpack.У нас есть что-то вроде этого:

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

Где мы специально говорим, что подсказка зависит от jquery, поэтому сначала загрузите jquery.Popover зависит от всплывающей подсказки, поэтому загружайте подсказку заранее.

Как мне перевести эту конфигурацию в webpack 4?Я искал в Интернете, пытаясь увидеть, есть ли что-нибудь достаточно похожее.Shimming Webpack не делает зависимость между библиотеками.Я тоже ничего не вижу в документации ... что меня сильно удивило.

У меня есть статьи (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, что, я думаю, может быть моей первой проблемой, так как import-loader предположительно добавляет указанную библиотеку в модуль popover, верно?

Я точно вижу, что не так с моим подходом, и исчерпал много ресурсов в Интернете. Я уверен, что кому-то приходилось сталкиваться с подобными проблемами раньше, пожалуйста, затените для меня немного света. Спасибо!

1 Ответ

0 голосов
/ 27 ноября 2018

Вы должны указать tooltip и popover в разделе resolve.alias:

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.

...