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

Заметка появилась в 2019 году, когда проектам нередко приходилось совмещать модули Webpack с jQuery-плагинами, ожидающими глобальную переменную. Здесь важно различать три задачи: импортировать библиотеку в модуль, автоматически подставлять импорт в исходники и открыть jQuery внешнему скрипту на странице.

Установка и обычный импорт

Установите зависимость одним из менеджеров пакетов:

npm install jquery
# либо
yarn add jquery

Если вы управляете исходным модулем, явный импорт проще скрытой зависимости:

import $ from 'jquery';

$('.notice').text('Готово');

ProvidePlugin: идентификаторы внутри сборки

ProvidePlugin обнаруживает свободные идентификаторы в обрабатываемых Webpack модулях и подставляет загрузку зависимости. Такая настройка сама по себе не обещает, что произвольный внешний скрипт увидит window.jQuery. Конфигурация CommonJS:

const webpack = require('webpack');

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

Область действия и специальное сопоставление window.jQuery описаны в документации ProvidePlugin. Выбирайте настройку по тому, как именно потребитель обращается к библиотеке.

Глобальный jQuery для старого плагина

Если скрипт подключён отдельно от сборки и действительно читает window, создайте небольшой входной модуль:

import $ from 'jquery';

window.jQuery = $;
window.$ = $;

Сначала загрузите этот bundle, затем внешний плагин. Для отдельных файлов не используйте async, если нужен строгий порядок. Для плагина из npm предпочтительнее его документированный модульный импорт; некоторые пакеты ожидают готовую глобальную переменную уже при выполнении модуля, поэтому порядок одних только строк с ES import не заменяет проверку способа инициализации.

Несколько bundle и CDN

Наличие jQuery в одном bundle не означает автоматического переиспользования другим. Либо настройте общий chunk, либо объявите jQuery внешней зависимостью. Во втором варианте библиотеку загружает HTML-страница:

// webpack.config.cjs
module.exports = {
  externals: { jquery: 'jQuery' },
};

Внешний скрипт должен предоставить window.jQuery до выполнения зависимого bundle. Адрес, версия, контроль целостности и политика загрузки относятся к HTML приложения. Не смешивайте одновременно копию из npm и копию из CDN без осознанной причины. Упомянутый в первоначальном примере html-webpack-externals-plugin был одним из способов сгенерировать такую страницу; он не обязателен для этой задачи.

Проверка подключения

Один модуль с import $ from "jquery" должен работать без глобальной переменной.
Отдельный legacy-плагин должен запускаться после модуля, присваивающего window.jQuery.
В сетевой панели не должно быть непреднамеренной повторной загрузки jQuery.
Версия плагина должна поддерживать установленную версию jQuery; проверяйте реальную инициализацию, а не только наличие $.