JavaScript. Использование jQuery в Webpack

Webpack является одним из самых мощных и гибких инструментов для сборки фронтенд-проектов. Иногда необходимо включить в проект Webpack одну из самых популярных JavaScript библиотек jQuery.

Для начала необходимо установить jQuery из репозитория npm командой:

npm i jquery

либо (если используем менеджер пакетов Yarn):

yarn add jquery

Чтобы jQuery стал доступным в глобальной области видимости в «бандле» (собираемом пакете, от bundle) можно использовать ProvidePlugin (см. официальную документацию https://webpack.js.org/plugins/provide-plugin/):

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

Так библиотека jQuery будет доступна через глобальные переменные $, jQuery, window.jQuery.
Иногда в проектах Webpack собираются несколько бандлов. Например, есть финальный скрипт, который подключается на все страницы и в нём необходима библиотека jQuery. А в других скриптах она уже не нужна, так как она будет уже подключена глобально. В таком случае только в модуле, который будет глобальным, необходимо подключить jQuery (для импорта модулей будем использовать стандарт ES6/ES2015):

import $ from 'jquery';
 
global.jQuery = $;
global.$ = $;

Также jQuery можно подключить в проект Webpack через CDN с помощью плагина html-webpack-externals-plugin (https://www.npmjs.com/package/html-webpack-externals-plugin):

module.exports = {
  plugins: [
    new HtmlWebpackExternalsPlugin({ // optional plugin: inject cdn
      externals: [
        {
            module: 'jquery',
            entry: 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'
        }
      ],
    }),
  ]
};

После чего можно использовать jQuery библиотеки, подключая их следующим образом:

require("inputmask/dist/inputmask/jquery.inputmask.js");

2 комментария

  1. У вас не совсем правильно написано подключение jQuery глобально. Нужно:
    import $ from ‘jquery’;

    global.jQuery = global.$ = $;

Написать ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *