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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
javascript实现画板功能
Apr 12 Javascript
五句话帮你轻松搞定js原型链
Dec 09 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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 getsiteurl()函数
2009/09/05 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
推荐dojo学习笔记
2007/03/24 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python shutil模块用法实例分析
2019/10/02 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
质量保证书范本
2014/04/29 职场文书