node package manager

imports-loader

imports loader module for webpack

npm deps test chat

Imports Loader

The imports loader allows you to use modules that depend on specific global variables.

This is useful for third-party modules that rely on global variables like $ or this being the window object. The imports loader can add the necessary require('whatever') calls, so those modules work with webpack.

Install

npm install imports-loader

Usage

Given you have this file example.js

$("img").doSomeAwesomeJqueryPluginStuff();

then you can inject the $ variable into the module by configuring the imports-loader like this:

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

This simply prepends var $ = require("jquery"); to example.js.

Syntax

Query value Equals
angular var angular = require("angular");
$=jquery var $ = require("jquery");
define=>false var define = false;
config=>{size:50} var config = {size:50};
this=>window (function () { ... }).call(window);

Multiple values

Multiple values are separated by comma ,:

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

webpack.config.js

As always, you should rather configure this in your webpack.config.js:

// ./webpack.config.js 
 
module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?this=>window"
            }
        ]
    }
};

Documentation: Using loaders

Typical Use Cases

jQuery plugins

imports-loader?$=jquery

Custom Angular modules

imports-loader?angular

Disable AMD

There are many modules that check for a define function before using CommonJS. Since webpack is capable of both, they default to AMD in this case, which can be a problem if the implementation is quirky.

Then you can easily disable the AMD path by writing

imports-loader?define=>false

For further hints on compatibility issues, check out Shimming Modules of the official docs.

Maintainers


Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin