webpack之externals

external顾名思义外部的外面的,这个参数主要作用就是,可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。<pre> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script></pre>jquery的使用如下:
<pre>
//我们不想这么用
const $ = window.jQuery
// 而是这么用
const $ = require("jquery")
$("#content").html<code>("<h1>hello world</h1>")</code></pre><p>这时,我们便需要配置externals:</p><pre> module.exports = {
...
output: {
...
libraryTarget: "umd"
},
externals: {
jquery: "jQuery"
},
...
}</pre><p>我们可以看看编译后的文件</p><pre>({
0: function(...) {
var jQuery = require(1);
/* ... /
},
1: function(...) {
// 很明显这里是把window.jQuery赋值给了module.exports
// 因此我们便可以使用require来引入了。
module.exports = jQuery;
},
/
... */
});</pre>

看一个我们自己的例子

假设我们自己有个工具库,tools.js,它并没有提供给我们UMD的那些功能,只是使用window或者global的方式把工具的对象tools暴露出来
<pre>window.Tools = {
add: function(num1, num2) {
return num1 + num2
}
}</pre><p>接下来把它放在任何页面能够引用到的地方,例如CDN,然后用script的方式引入页面</p><pre><script src="http://xxx/tools.js"></script></pre><p>一般来说我们可能会直接就这么用了</p><pre> const res = Tools.add(1,2)</pre><p>但是既然我们是模块化开发,当然要杜绝一切全局变量了,我们要用require的方式</p><pre>const tools = require('mathTools')
const res = tools.add(1,2)
</pre><p>这是我们再来配置一些externals即可</p><pre>module.exports = {
...
output: {
...
libraryTarget: "umd"
},
externals: {
mathTools: "Tools"
},
...
}</pre>
这里其实是相当于对tools.js进行了shimming处理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,774评论 25 709
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,975评论 6 342
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,253评论 0 21
  • 我很欣赏老公的细心,我们家的门锁不好开很长时间了,他销了一点铅笔沫,放进锁孔里,用钥匙开很好开了,很滑润,欣赏并感...
    水玲珑英子阅读 530评论 1 4