目录
Webpack 2.2 中文文档
imports-loader
imports loader for webpack
imports loader 允许你依赖特定的全局变量来使用模块。
这对一些依赖全局变量的第三方模块(例如 window 下的 $ 或者 this)很有用。imports loader 会添加必要的 require(‘whatever’) 调用,让这些模块可以在 webpack 中使用。
安装
npm install imports-loader
用法
假设你有 example.js 这个文件
$("img").doSomeAwesomeJqueryPluginStuff();
然后你可以像下面这样通过配置 imports-loader 插入 $ 变量到模块中:
require("imports-loader?$=jquery!./example.js");
这将简单的把 var $ = require(“jquery”); 前置插入到 example.js 中。
语法
加载器查询值 | 含义 |
---|---|
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); |
多个值
使用逗号 , 来分隔和使用多个值:
require("imports-loader?$=jquery,angular,config=>{size:50}!./file.js");
webpack.config.js
同样的,在你的 webpack.config.js 配置文件中进行配置会更好:
// ./webpack.config.js module.exports = { ... module: { loaders: [ { test: require.resolve("some-module"), loader: "imports-loader?this=>window" } ] } };
文档:使用加载器
典型的使用场景
jQuery 插件
imports-loader?$=jquery
自定义的 Angular 模块
imports-loader?angular
禁用 AMD
有很多模块在使用 CommonJS 前会进行 define 函数的检查。自从 webpack 两种格式都可以使用后,在这种场景下默认使用了 AMD 可能会造成某些问题(如果接口的实现比较古怪)。
你可以像下面这样轻松的禁用 AMD
imports-loader?define=>false
关于兼容性问题的更多提示,可以参考官方的文档 Shimming Modules。
License
MIT (http://www.opensource.org/licenses/mit-license.php)
原文:https://webpack.js.org/loaders/imports-loader/
上一篇: i18n-loader 下一篇: jshint loader