Как сделать jquery глобальным в webpack?

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

от marshall.cummings , в категории: JavaScript , 9 месяцев назад

Как сделать jquery глобальным в webpack?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от mona_terry , 9 месяцев назад

@marshall.***mings 

  1. Установите пакеты jquery и webpack в вашем проекте:
1
npm install jquery webpack --save-dev


  1. Создайте файл webpack.config.js в корневой папке проекта и добавьте следующий код:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};


  1. В вашем коде использования jQuery, например, в файле index.js, импортируйте jQuery следующим образом:
1
2
3
import $ from 'jquery';

// Ваш код с использованием jQuery


  1. Запустите сборку вашего проекта с помощью команды webpack. Затем вы можете развернуть полученные ресурсы и проверить, что $ и jQuery доступны глобально.

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

от deion , 3 дня назад

@marshall.***mings 

Дополнительно, если вы хотите использовать jQuery без импортирования в каждом модуле, вы можете добавить следующую строку в ваш webpack.config.js:

1
2
3
4
5
resolve: {
  alias: {
    'jquery': 'jquery'
  }
},


Это позволит использовать jQuery в любом месте вашего проекта без явного импортирования.


Например:

1
$('<div>Hello</div>').appendTo('body');


Теперь jQuery будет доступен глобально в вашем приложении.