Загрузчик импортов

Загрузчик импортов позволяет использовать модули, которые зависят от определённых глобальных переменных.

Это полезно для сторонних модулей, которые полагаются на глобальные переменные, такие как $ или this являясь объектом window. Загрузчик импортов может добавить необходимые вызовы require('whatever'), чтобы эти модули работали с webpack.

Установка

npm install imports-loader

Использование

Предположим, у вас есть этот файл example.js

$("img").doSomeAwesomeJqueryPluginStuff();

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

require("imports-loader?$=jquery!./example.js");

Это просто добавляет var $ = require("jquery"); к example.js.

Синтаксис

Значение запроса	Равно
angular var angular = require("angular");	var angular = require("angular");
$=jquery var $ = require("jquery");	var $ = require("jquery");
define=>false var define = false;	var define = false;
config=>{size:50} var config = {size:50};	var config = {size:50};
this=>window (function () { ... }).call(window);	(function () { ... }).call(window);

Множественные значения

Несколько значений разделяются запятой ,:

require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");

webpack.config.js

Как обычно, лучше настроить это в вашем webpack.config.js:

// ./webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: require.resolve("some-module"),
                use: "imports-loader?this=>window"
            }
        ]
    }
};

Типичные варианты использования

Плагины jQuery

imports-loader?$=jquery

Пользовательские модули Angular

imports-loader?angular

Отключение AMD

Существует множество модулей, которые проверяют функцию define перед использованием CommonJS. Поскольку webpack способен к обоим, по умолчанию они используют AMD в этом случае, что может быть проблемой, если реализация специфична.

Затем вы можете легко отключить путь AMD, написав

imports-loader?define=>false

Для получения дополнительных советов по проблемам совместимости, ознакомьтесь с Модулями подмены в официальной документации.