Webpack载入loader,imports-loader,exports-loader,expose-loader
来源:互联网 发布:格式化成json字符串 编辑:程序博客网 时间:2024/05/24 07:07
Webpack有几个和模块化相关的loader,imports-loader
,exports-loader
,expose-loader
,比较容易混淆。今天,我们来理一理。
webpack中引入第三方库非npm包,可以采用exports-loader 的方法引入
imports-loaders
文档介绍的是:用于向一个模块的作用域内注入变量(Can be used to inject variables into the scope of a module.),官方的文档总是言简意赅但是不太好懂。我们来举个例子。
例子完整的代码可以点这里jqGreen.js
文件里仅一行代码
//没有模块化$('#box').css('color','green');
index.js
文件也只有一行代码
require('./jqGreen');
我们的配置文件中,是把index.js
作为入口文件的。
{ entry:{ index:'./src/js/index.js' }}
注意,我们并没有引入jquery
。所以运行的结果是$ is not defined
。
但是如果我们稍微修改一下jqGreen
的引入方式,就能很轻松的解决这个问题。index.js
文件
require('imports?$=jquery!./jqGreen');
当然,这个能运行之前,我们要npm install imports-loader
一下。上面代码,把变量$
注入进模块jqGreen.js
。同时,我们指定了变量$=jquery
。等于是在jqGreen.js
文件的最顶上,加上了var $=require('jquery')
。这样,程序就不会报$ is not defined
的错误了。
exports-loader
exports有导出
的意思,这让我们猜测它有从模块中导出变量的功能。实际情况大致如此。我们来看个小例子。
例子的完整代码在 这里Hello.js
文件中仅有一个方法,直接绑定在全局变量window
上面。
window.Hello = function(){ console.log('say hello.');}
然后我们在index.js
文件里去引用这个Hello.js
:var hello = require('./Hello.js');
。这样引用的结果是变量hello
是undefined
。因为我们在Hello.js
文件里没有写module.exports=window.Hello
,所以index.js
里我们require
的结果就是undefined
。这个时候,exports-loader
就派上用场了。我们只用把index.js
的代码稍微改动一下:var hello = require('exports?window.Hello!./Hello.js');
,这个时候,代码就能正确的运行了。变量hello
就是我们定义的window.hello
啦。var hello = require('exports?window.Hello!./Hello.js');
这行代码,等于在Hello.js
里加上一句module.exports=window.Hello
,所以我们才能正确的导入。
expose-loader
把一个模块导出并付给一个全局变量。文档里给了一个例子:
require("expose?libraryName!./file.js");// Exposes the exports for file.js to the global context on property "libraryName".// In web browsers, window.libraryName is then available.
例子中的注释是说把file.js中exports出来的变量付给全局变量"libraryName"
。假如file.js
中有代码module.exports=1
,那么require("expose?libraryName!./file.js")
后window.libraryName
的值就为1(我们这里只讨论浏览器环境)。
我这里还有一个稍稍复杂点的从一个umd模块的文件里导出到全局变量的例子,有兴趣的同学点击这里。
转自:https://segmentfault.com/a/1190000007515136
- Webpack载入loader,imports-loader,exports-loader,expose-loader
- webpack中imports-loader,exports-loader,expose-loader的区别
- 【webpack】expose-loader 插件使用
- Loader
- Loader
- Loader
- loader
- loader
- Loader
- loader
- Loader
- loader
- Loader
- loader
- Loader
- Loader
- loader
- Loader
- EM与PX的对应关系
- 你不可不知的HTML优化技巧
- orcal数据库技巧和注意事项
- 用自己的话分别谈谈对 struts2,spring,Hibernate的理解
- 如何使用MindManager中的提醒功能
- Webpack载入loader,imports-loader,exports-loader,expose-loader
- Android 组件之一(Service)
- 【maven】---聚合和继承
- java开发系统内核:实现shift按键效果
- NT99141摄像头调试
- 【学习笔记】swift 基础部分 2
- 时间管理(一):时间去哪了?
- 一维卷积c实现
- Nginx图片服务器的安装笔记《1》