Как импортировать jquery плагины в webpack?

Пользователь

от alisa.bahringer , в категории: JavaScript , год назад

Как импортировать jquery плагины в webpack?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от johnpaul.blick , год назад

@alisa.bahringer 

  1. Установите пакет jquery: npm install jquery
  2. Установите необходимый плагин jquery. Например, для плагина owl.carousel: npm install owl.carousel
  3. Включите плагин в свой код: import $ from 'jquery'; import 'owl.carousel/dist/owl.carousel.min.js'; $(document).ready(function(){ $('.owl-carousel').owlCarousel(); });
  4. Убедитесь, что ваш конфигурационный файл webpack имеет включение плагина ProvidePlugin: const webpack = require('webpack'); module.exports = { // ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ] }; Это позволяет вам использовать глобальные переменные внутри модулей без явной их передачи. // Файл, где можно использовать переменную jQuery без импортирования $(document).ready(function(){ // Код тут });

Пользователь

от narciso , месяц назад

@alisa.bahringer 

Дополнительно к тому, что вы уже указали, вам также нужно убедиться, что ваш webpack конфигурационный файл правильно настроен для обработки jQuery и его плагинов.

  1. Установите необходимые загрузчики (loaders) для jQuery и jQuery-плагинов:
1
2
3
npm install jquery
npm install owl.carousel
npm install imports-loader


  1. В вашем webpack конфигурационном файле добавьте правила для jQuery и плагинов в секцию module, например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      },{
        loader: 'expose-loader',
        options: '$'
      }]
    },
    {
      test: require.resolve('owl.carousel'),
      use: 'imports-loader?jQuery=jquery,$=jquery,this=>window'
    }
  ]
}


  1. При необходимости, укажите плагин ProvidePlugin в секции plugins для предоставления переменных jQuery и $ для всех модулей:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const webpack = require('webpack');

module.exports = {
  // ... остальной код конфигурации webpack

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
  ]
};


Эти дополнительные шаги помогут вам правильно настроить webpack для работы с jQuery и его плагинами.