文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

imports-loader

导入加载器允许您使用依赖于特定全局变量的模块。

这对于依赖全局变量$或this作为window对象的第三方模块非常有用。导入加载程序可以添加必要的require('whatever')调用，因此这些模块可以与webpack一起使用。

安装

代码语言：javascript
复制
npm install imports-loader

用法

假设你有 example.js 这个文件

代码语言：javascript
复制
$("img").doSomeAwesomeJqueryPluginStuff();

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

代码语言：javascript
复制
require("imports-loader?$=jquery!./example.js");

这将简单的把 var $ = require("jquery"); 前置插入到 example.js 中。

loader查询值

含义

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

多个值

多个值由逗号分隔,：

代码语言：javascript
复制
require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");

webpack.config.js

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

代码语言：javascript
复制
// ./webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: require.resolve("some-module"),
                use: "imports-loader?this=>window"
            }
        ]
    }
};

典型用例

jQuery 插件

imports-loader?$=jquery

自定义角模块

imports-loader?angular

禁用 AMD

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

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

代码语言：javascript
复制
imports-loader?define=>false

有关兼容性问题的更多提示，请查看官方文档的 Shimming 模块。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券