ag-grid is proud to partner with webpack

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
Query value Equals `angular` `var angular = require("angular");`	`var angular = require("angular");`
Query value Equals `$=jquery` `var $ = require("jquery");`	`var $ = require("jquery");`
Query value Equals `define=>false` `var define = false;`	`var define = false;`
Query value Equals `config=>{size:50}` `var config = {size:50};`	`var config = {size:50};`
Query value Equals `this=>window` `(function () { ... }).call(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: {
        rules: [
            {
                test: require.resolve("some-module"),
                use: "imports-loader?this=>window"
            }
        ]
    }
};

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