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.

安装

  1. npm install imports-loader

用法 用法” class=”icon-link” href=”#用法”>

假设你有 example.js 这个文件

  1. $("img").doSomeAwesomeJqueryPluginStuff();

然后你可以像下面这样通过配置 imports-loader 插入 $ 变量到模块中:

  1. 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);

多个值

使用逗号 , 来分隔和使用多个值:

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

webpack.config.js

同样的,在你的 webpack.config.js 配置文件中进行配置会更好:

  1. // ./webpack.config.js
  2. module.exports = {
  3. ...
  4. module: {
  5. rules: [
  6. {
  7. test: require.resolve("some-module"),
  8. use: "imports-loader?this=>window"
  9. }
  10. ]
  11. }
  12. };

典型的使用场景

jQuery 插件

imports-loader?$=jquery

自定义的 Angular 模块

imports-loader?angular

禁用 AMD

有很多模块在使用 CommonJS 前会进行 define 函数的检查。自从 webpack 两种格式都可以使用后,在这种场景下默认使用了 AMD 可能会造成某些问题(如果接口的实现比较古怪)。

你可以像下面这样轻松的禁用 AMD

  1. imports-loader?define=>false

关于兼容性问题的更多提示,可以参考官方的文档 Shimming Modules

维护人员

imports-loader - 图1


Juho Vepsäläinen

imports-loader - 图2


Joshua Wiens

imports-loader - 图3


Kees Kluskens

imports-loader - 图4


Sean Larkin