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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
用文本作数据处理
2006/10/09 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Seajs的学习笔记
2014/03/04 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
python封装对象实现时间效果
2020/04/23 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
讲解Python中的标识运算符
2015/05/14 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python实现画圆功能
2018/01/25 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python3.6数独问题的解决
2019/01/21 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
保研专家推荐信范文
2015/03/25 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android