Skip to content

imports-loader

状态:草稿

imports,顾名思义是导入的意思,这个loader的作用与exports-loader刚好相反,是用来将其它模块导入到当前模块中。这个loader常常在处理一些非模块化规范编写的文件时被用到。

背景

举个简单的例子,有模块b,依赖全局变量window.a,那么在没有使用模块化规范的情况下,有可能它的代码中会直接写a

javascript
// 模块b直接依赖全局变量a
a.xxx();
// 模块b直接依赖全局变量a
a.xxx();

而如果a经过webpack打包,则很有可能不会暴露全局变量,此时就需要使用imports-loader来对a进行导入。

使用

todo:例子

javascript
require('imports?$=jquery!./example.js');

require('imports?$=jquery,angular,config=>{size:50}!./file.js');
require('imports?$=jquery!./example.js');

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

典型使用场景

  • 为jQuery插件注入$变量 imports?$=jquery
  • 自定义angular imports?angular
  • 让umd模块检测不到define方法从而避免使用amd规范 imports?define=>false
  • 将模块中的this还原为window imports?this=window

一目了然,不再解释。

本文全部示例代码见https://github.com/TooBug/webpack-guide/tree/master/examples/chapter4/exports-loader/example1