Зависимость между библиотеками Webpack, как в requireJS.config.shim

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

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

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

Как мне перевести эту конфигурацию в 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' }
        ]

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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Спасибо, я исправил ваши предложения, но это все еще не удается :(. Сообщение обновлено.

kevin 26.11.2018 23:02

Не могли бы вы изменить значение загрузчика правил всплывающей подсказки на exports-loader?tooltip!imports-loader?$=jquery и сообщить мне, помогло ли это. Другое предложение - использовать expose-loader и выполнить 'expose-loader? Tooltip! Imports-loader? This => window' (подробности см. В npmjs.com/package/expose-loader)

Danylo Rosiichuk 26.11.2018 23:24

Привет, приятель, спасибо за отзывы. Я решил свою проблему ... Думаю. первая проблема заключалась в том, что в тесте не должно было быть одной кавычки: '/ popover /'. Во-вторых, сокращенное обозначение загрузчиков устарело в webpack 4 ... поэтому я изменил использование: [loader: LOADER, options: OPTIONS]. В-третьих, я использую expose-loader вместо export-loader. Спасибо за предложения!

kevin 27.11.2018 02:01

Другие вопросы по теме