webpack external模块的具体使用


Posted in Javascript onMarch 10, 2018

这篇文章讨论Webpack打包library时经常需要用到的一个选项external,它用于避免将一些很通用的模块打包进你发布的library里,而是选择把它们声明成external的模块,在你的library被上层使用后,在最后阶段由Webpack统一把这个external的依赖模块打包进来。

external选项一般都是用在打包library上面,如果不是library而是一个最终的app的发布JS文件,那external也没有什么意义。关于Webpack打包library的分析和一些选项的作用,我在前一篇文章做了讨论。

external选项

我们仍然使用前一篇文章的例子,定义一个库util.js:

import $ from 'jquery'

function hideImages() {
 $('img').hide();
}

export default {
 "hideImages": hideImages
}

我们使用Webpack打包发布这个库:

// 入口文件
entry: {
 util: './util.js',
}

// 输出文件
output: {
 path: './dist',
 filename: '[name].dist.js'

 library: 'util',
 libraryTarget: commonjs2,
 targetExport: 'default'
}

这样打包出来的util.dist.js文件会把jquery的代码完整地注入进去,因为你的源代码使用到了它。但是这往往并不是我们希望的,因为jquery是很通用的模块,在一个app中,很可能其它的库也会用到它,最顶层的入口文件app也可能用到它,如果每一个库模块的发布版本都将jquery原封不动地打包进了自己的bundle,最后拼到一起,在最终的app发布代码里就会有很多份jquery的复制,当然这可能并不会影响它的正常功能,但是会占据很大的代码体积。

所以通常情况下当你的库需要依赖到例如jquery,bootstrap这样的通用JS模块时,我们可以不将它打包进bundle,而是在Webpack的配置中声明external:

externals: {
 jquery: {
  root: 'jquery',
  commonjs: 'jquery',
  commonjs2: 'jquery',
  amd: 'jquery',
 },
},

这就是在告诉Webpack:请不要将这个模块注入编译后的JS文件里,对于我源代码里出现的任何import/require这个模块的语句,请将它保留。

我们可以看一下编译后的bundle文件的结构:

module.exports = (function(modules) {
 var installedModules = {};
 function webpack_require(moduleId) {
   // ...
 }
 return webpack_require('./util.js');
}) ({
 './util.js': generated_util,
 // '/path/to/jquery.js': generated_jquery 原本有这一行,现在被删去。
});

可以看到jquery模块没有被打包进bundle文件,而对于util,它的生成代码即generated_util函数中关于import jquery相关的语句也被保留了原意:

function generated_util(module, exports, webpack_require) {
 var $ = require('jquery');
 // util的其它源代码
 // ...
}

当然也并非完全没有修改,例如将import的改回了传统的require关键词,因为我们这里用的是CommonJS风格的打包方式。不过这些都是次要的,关键是它保留了require这个关键词,而没有使用webpack_require将jquery真的引入进来。这就是说,当前的这个JS文件的模块管理系统中是没有jquery的,它是一个external的模块,需要在这个JS文件被其它人引用并且在上层编译时,jquery才可能被真的引入进来,到那个时候这里的require关键词才会被替换为webpack_require。

对于external的依赖模块,通常你可以这样做,例如你使用npm发布你的库,你可以将jquery在package.json文件中添加到dependencies,这样别人npm install你发布的库时,jquery也会被自动下载到node_modules供别人打包使用。

umd格式下的打包

如果我们使用umd格式打包,我们可以看到在不同环境中,external模块是如何发挥作用的:

(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === 'object' && typeof module === 'object') // commonjs2
  module.exports = factory(require('jquery'));
 else if(typeof define === 'function' && define.amd)
  define("util", ['jquery'], factory); // amd
 else if(typeof exports === 'object')
  exports["util"] = factory(require('jquery')); // commonjs
 else
  root["util"] = factory(root['jquery']); // var
}) (window, function(__webpack_external_module_jquery__) {
 return (function(modules) {
  var installedModules = {};
  function webpack_require(moduleId) {
    // ...
  }
  return webpack_require('./util.js');
 }) ({
  './util.js': generated_util,
 });
}

而generated_util也相应地增加一个参数__webpack_external_module_jquery__:

function generated_util(module, exports, webpack_require,
            __webpack_external_module_jquery__) {
 var $ = __webpack_external_module_jquery__;
 // util的其它源代码
 // ...
}

这样的写法似乎结构和上面的CommonJS的编译版本不太一样,但实际上本质是一样的。因为现在umd要照顾到不同的运行环境,所以它把require('jquery')提前了,作为factory的参数传入。对于每种运行环境,各有各的做法:

  1. CommonJS:保留require('jquery')语句。
  2. AMD:在define中将jquery定义为依赖模块。
  3. Var:从全局域中取出jquery变量,这需要jquery在该模块之前就已经被加载。

然后不管是哪种情况,它们都将载入后的jquery模块作为参数传入factory函数,这样就能正确加载util模块了。

以上涉及到Webpack生成代码的部分可能有点绕,需要你比较了解Webpack打包模块的机制和原理,关于这部分我在这篇文章里做了详细讨论。

总结

以上就是关于Webpack的external选项的使用,并且从编译后的JS代码分析了它到底是如何起作用的。我想阅读Webpack相关的生成代码还是很重要的,这样才算是真正地理解了external的机制,在碰到一些坑时才能知道怎么去debug。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 #Javascript
浅谈webpack组织模块的原理
Mar 10 #Javascript
Vuex实现计数器以及列表展示效果
Mar 10 #Javascript
在vue中使用css modules替代scroped的方法
Mar 10 #Javascript
redux-saga 初识和使用
Mar 10 #Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 #Javascript
vue获取当前点击的元素并传值的实例
Mar 09 #Javascript
You might like
php 生成短网址原理及代码
2014/01/23 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python3的socket使用方法详解
2020/02/18 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
新闻专业个人自我评价
2013/09/21 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
检讨书1000字
2014/10/11 职场文书
领导干部作风建设总结
2014/10/23 职场文书
万里长城导游词
2015/01/30 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
期中考试后的感想
2015/08/07 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Python基础之数据结构详解
2021/04/28 Python
英镑符号 £
2022/02/17 杂记
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫