webpack组织模块打包Library的原理及实现


Posted in Javascript onMarch 10, 2018

之前一篇文章分析了Webpack打包JS模块的基本原理,所介绍的案例是最常见的一种情况,即多个JS模块和一个入口模块,打包成一个bundle文件,可以直接被浏览器或者其它JavaScript引擎执行,相当于直接编译生成一个完整的可执行的文件。不过还有一种很常见的情况,就是我们要构建发布一个JavaScript的库,比如你在npm社区发布自己的库,这时Webpack就需要相应的配置,编译生成的代码也会略有不同。

和之前一篇文章一样,本文主要分析的是Webpack的生成代码,并结合它来说明编译库时Webpack那些关于library的配置选项的具体作用,相应的官方文档在这里。

编写JS的库

我们还是从简单的案例开始,我们随便编写一个简单的库util.js:

import $ from 'jquery'

function sayHello() {
 console.log("Hello");
}

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

export default {
 sayHello: sayHello,
 hideImages: hideImages
}

提供了两个函数,当然它们之间毫无关系,也实际上没有任何卵用,纯粹是仅供教学参考。。。

接下来写Webpack的配置:

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

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

但仅仅这样是不够的,这样输出的文件就是一个立即执行的函数,最后会返回util.js的exports,参照上一篇文章中分析,最后生成的bundle代码结构大致是这样的:

(function(modules) {
 var installedModules = {};
 
 function webpack_require(moduleId) {
   // ...
 }

 return webpack_require('./util.js');
}) ({
 './util.js': generated_util,
 '/path/to/jquery.js': generated_jquery
});

它如果执行完,那就结束了,将util.js的export部分返回而已,而我们需要的是将这个返回值交给编译后的文件的module.export,这样编译后的文件就成了一个可以被别人import的库。所以我们希望得到的编译文件应该是这样的:

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
});

要得到这样的结果,Webpack配置output部分需要加入library信息:

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

 library: 'util',
 libraryTarget: commonjs2
}

这里最重要的就是libraryTarget,我们现在采用commonjs2的格式,就会得到上面的编译结果,也就是说Webpack会library把最后的输出以CommonJS的形式export出来,这样就实现了一个库的发布。

其它发布格式

除了commonjs2,libraryTarget还有其它选项:

var (默认值,发布为全局变量)
commonjs
commonjs2
amd
umd

使用不同的选项,编译出来的文件就能够在不同JavaScript执行环境中使用。在这里我们直接看万金油umd格式的输出是怎么样的:

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

比之前的commonjs2的情况要复杂得多,因为它需要处理各种不同的case,但其实后面的部分都是一样的,最重要的就是最前面的几行,这是umd模块的标准写法。它运行传入的factory函数,实际上就是加载模块的函数,然后把返回的结果根据不同的运行环境交给相应的对象。例如var,那就会把结果设置为一个全局变量,这用于浏览器通过<script>标签直接导入该JS文件;如果是CommonJS,它则交给exports对象;如果是AMD环境,它也是用标准的AMD的写法。这样这个发布出来的JS库就可以在任意的环境中都能被其他人使用。

targetExport控制输出内容

如果用umd格式打包,可能会有一个坑需要注意,如果你的库的源代码是用ES6格式export default来输出的,正如上面的例子util.js,你直接把编译后的JS库文件放到浏览器中使用,可以是<script>,或者RequireJS,可能得不到你想要的结果。这是因为你的JS文件返回给你的对象是这样的:

{
 'default': {
  sayHello: sayHello,
  hideImages: hideImages
 }
}

而不是你所期望的:

{
 sayHello: sayHello,
 hideImages: hideImages
}

不仅是浏览器,在不支持ES6的模块系统中同样会出这个问题,就是因为它们并不认识default。所以你编译后的JS文件实际上应当只输出default,这就需要在Webpack配置里用targetExport来控制:

library: 'util',
libraryTarget: umd,
targetExport: 'default'

这样上面的模块加载函数factory会在返回值后面加一个['default'],这样就只返回exports的default部分。

这个坑在umd格式下其实还是挺容易踩到的,例如你发布一个Vue组件,.vue文件中的JavaScript部分一般都是把Component对象以export default的格式导出的,就像这样:

export default {
 name: 'xxx',
 data: {
  return // ...
 },
 props: {
  // ...
 }
 methods: {
  // ...
 }
}

如果你把编译后的JS文件直接放在浏览器里运行,并且用CDN的方式通过<script>加载Vue,你会发现Vue无法识别这个Component,因为你得到的这个对象多了一层不必要的default。

你可能会问如果我把输出内容改成了default,会不会影响这个模块在ES6环境下的使用?一般来说是不会的。之前一篇文章里已经谈到,Webpack的生成代码在引入一个模块时,会通过一个叫__esModule的值来设置和判断它是不是ES6格式的export,现在如果只导出default部分,那么这个对象是被视为非ES6的,因为它不含__esModule。这样其它模块通过import来引入这个模块时,会引入整个对象,这实际上变相地就等价于只引入原模块的export default部分。

当然以上讨论的前提是,你所有需要export的内容全部都在export default里。如果你既有default,又有正常的export,那编译后的文件只导出default部分显然是不行的。

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

Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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
vue.js获得当前元素的文字信息方法
Mar 09 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
如何在PHP中生成随机数
2020/06/04 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
python利用装饰器进行运算的实例分析
2015/08/04 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python迭代dict的key和value的方法
2018/07/06 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
自荐信模版
2013/10/24 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
小学教师管理制度
2014/01/18 职场文书
无故旷工检讨书
2014/01/26 职场文书
税务会计岗位职责
2014/02/18 职场文书
置业顾问岗位职责
2014/03/02 职场文书
销售员试用期自我评价
2014/09/15 职场文书
上课说话检讨书
2015/01/27 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
小学班级标语口号大全
2015/12/26 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
python爬取某网站原图作为壁纸
2021/06/02 Python
浅谈JS的原型和原型链
2021/06/04 Javascript
golang生成vcf通讯录格式文件详情
2022/03/25 Golang