twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
91 lines (59 loc) • 2.21 kB
Markdown
Can be used to inject variables into the scope of a module. This is especially useful if third-party modules are relying on global variables like `$` or `this` being the `window` object.
```
npm install imports-loader
```
Given you have this file `example.js`
```javascript
$("img").doSomeAwesomeJqueryPluginStuff();
```
then you can inject the `$` variable into the module by configuring the imports-loader like this:
``` javascript
require("imports?$=jquery!./example.js");
```
This simply prepends `var $ = require("jquery");` to `example.js`.
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 are separated by comma `,`:
```javascript
require("imports?$=jquery,angular,config=>{size:50}!./file.js");
```
As always, you should rather configure this in your `webpack.config.js`:
```javascript
// ./webpack.config.js
module.exports = {
...
module: {
loaders: [
{
test: require.resolve("some-module"),
loader: "imports?this=>window"
}
]
};
```
[](http://webpack.github.io/docs/using-loaders.html)
`imports?$=jquery`
`imports?angular`
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
```javascript
imports?define=>false
```
For further hints on compatibility issues, check out [Shimming Modules](http://webpack.github.io/docs/shimming-modules.html) of the official docs.
MIT (http://www.opensource.org/licenses/mit-license.php)