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.
安装
npm install imports-loader
用法 用法” class=”icon-link” href=”#用法”>
假设你有 example.js
这个文件
$("img").doSomeAwesomeJqueryPluginStuff();
然后你可以像下面这样通过配置 imports-loader 插入 $
变量到模块中:
require("imports-loader?$=jquery!./example.js");
这将简单的把 var $ = require("jquery");
前置插入到 example.js
中。
#
loader 查询值
含义
loader 查询值
angular
含义
var angular = require("angular");
loader 查询值
$=jquery
含义
var $ = require("jquery");
loader 查询值
define=>false
含义
var define = false;
loader 查询值
config=>{size:50}
含义
var config = {size:50};
loader 查询值
this=>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
有很多模块在使用 CommonJS 前会进行 define
函数的检查。自从 webpack 两种格式都可以使用后,在这种场景下默认使用了 AMD 可能会造成某些问题(如果接口的实现比较古怪)。
你可以像下面这样轻松的禁用 AMD
imports-loader?define=>false
关于兼容性问题的更多提示,可以参考官方的文档 Shimming Modules。
维护人员
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Sean Larkin |