Межбиблиотечная зависимость Webpack, как в requireJS.config.shim

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

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

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

Как мне перевести эту конфигурацию в webpack 4? Я искал в Интернете, пытаясь увидеть, есть ли что-то достаточно похожее. Шиммирование 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' }
        ]

также иметь соответствующие псевдонимы в настройке конфигурации.

ошибка, которую я получаю, - это браузер Constructor undefined в строке "Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype...", поэтому библиотека всплывающих подсказок не загружается до всплывающей подсказки. Я также не вижу никакого нового кода, добавленного веб-пакетом, и я думаю, что это может быть моей первой проблемой, поскольку imports-loader предположительно добавляет указанную библиотеку в модуль popover, верно?

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


webpack javascript frontend requirejs webpack-4
person kevin    schedule 26.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны указать 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 в своей конфигурации.

person Danylo Rosiichuk    schedule 26.11.2018
comment
Спасибо, я исправил ваши предложения, но это все еще не работает :(. Сообщение обновлено. - person kevin; 27.11.2018
comment
Не могли бы вы изменить значение загрузчика правила всплывающей подсказки на exports-loader?tooltip!imports-loader?$=jquery и сообщить мне, помогло ли это. Другое предложение — использовать expose-loader и выполнить 'expose-loader?tooltip!imports-loader?this=›window' (см. npmjs.com/package/expose-loader для подробностей) - person Danylo Rosiichuk; 27.11.2018
comment
Эй, приятель, спасибо, что дал мне обратную связь. Я решил свою проблему... я думаю. первая проблема заключалась в том, что у меня не должно быть одинарной кавычки в тесте: '/popover/' . Во-вторых, сокращенное обозначение загрузчиков устарело в веб-пакете 4 ... поэтому я изменил его на использование: [загрузчик: ЗАГРУЗЧИК, параметры: ОПЦИИ]. В-третьих, я использую expose-loader вместо export-loader. Спасибо за предложения! - person kevin; 27.11.2018