深入浅出webpack之externals的使用


Posted in Javascript onDecember 04, 2017

我们通常在做项目时可能会把第三方库打包到bundle中,比如下面这张图

深入浅出webpack之externals的使用

如果不想把第三方库打包到bundle中,这就有了externals。官方的使用externals比较简单

externals

官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

只需三步——

1.在HTML中引入第三方库的cdn

2.在webpack中配置externals

externals: {
 jquery: "jQuery",
}

3.在js中引用

const $ = require("jquery");
$("#content").html("<h1>hello world</h1>");

好,现在我们可以随心所欲的使用jquery插件并保证不会打包到bundle中。external是怎么办到的呢?下面我们通过bundle的源码来分析下原理。

深入浅出webpack之externals的使用

这里的/* 0 */和__webpack_require__分别指打包前js对应的模块函数,这里就不细说了。这里可以看到module.exports = jQuery,就是说我们externals中的key指的是require的东西,value指的就是它,就是说“当require的参数是jquery的时候,使用jQuery这个全局变量引用它”。这种最简洁的externals配置方式为默认的global模式,就是在window上挂一个全局变量,然后直接可以使用这个变量。具体的流程是这样,我们在源码中使用require('jquery')后,可以直接把jquery加到externals中,得到一个打包的trunk.js,但是在引入这个trunkjs之前,肯定要先引入jquery这个库文件,这个库文件会创建一个全局变量jQuery,而咱们的trunkjs中externals的jquery是global模式,所以实际上trunkjs引入jquery的时候,就会从全局变量中引用,即module.export = jQuery

深入浅出webpack之externals的使用

当然,既然是通过这种externals方式,其实我们可以不用require引入,直接使用全局变量也是可以的。

jQuery("#content").html("<h1>hello world</h1>");

大家如果注意到我刚说过的global模式的话,没错,你也许已经猜到了,我可以任意的使用不同的输出方式。如果打包文件我想运行到node环境下,我得使用commonjs规范,所以你要这么写。

externals: {
 jquery: "commonjs2 jQuery",
}

打包后会是这样子。

深入浅出webpack之externals的使用

然后我的项目中还用到了lodash,也想把它从bundle中移除,之前我的代码是这样子,引的是npm包

深入浅出webpack之externals的使用

深入浅出webpack之externals的使用

现在我们的externals配置如下

externals: {
  jquery: "jQuery",
  _: "lodash"

}

深入浅出webpack之externals的使用

我们必须要去掉这个const ,否则的话会报一个错误 lodash is not defined。为什么会这样呢?因为我们的lodash输出是global格式的,我在这里先卖一个关子,我们先统一一下输出格式,加一个libraryTarget字段

深入浅出webpack之externals的使用

这个东西是干嘛用的呢?

他是我们输出文件的模块化规范,想想我们上面配置的commonjs jquery是运行在node下,总之记住一句话——我们最长使用的模块化方案是commonjs2和umd,前者是为node环境,后者是为浏览器环境。一共有这几种规范:

"var" - Export by setting a variable: var Library = xxx (default)

"this" - Export by setting a property of this: this["Library"] = xxx
"commonjs" - Export by setting a property of exports: exports["Library"] = xxx
"commonjs2" - Export by setting module.exports: module.exports = xxx
"amd" - Export to AMD (optionally named - set the name via the library option)
"umd" - Export to AMD, CommonJS2 or as property in root

深入浅出webpack之externals的使用

然后报这个错误,也就是说我们的模块没有正确的输出,回到我们的externals,它更多的是指定当你引用一个包的时候,这个包(lodash)应该遵循哪种模块化方式(common,root,amd等等)引入,这意思就是说,打包的时候不需要关心他到底怎么输出。

externals: {
  jquery: "jQuery",
  lodash: {
   commonjs: 'lodash',
   commonjs2: 'lodash',
   amd: 'lodash',
   root: '_'
  }
 },

ok,记得要将之前的覆盖掉,替换成下面的require,因为在externals中我们规范的commmonjs规范为lodash

深入浅出webpack之externals的使用

也就是说,这就是我们最初的代码,即没有用过externals时候的代码,看,也就是说我们只需要配置externals和libraryTarget就可以,其他的业务逻辑代码不需要改变。包括我们的项目中还用了echarts,这个通通不用改变!!!!!

深入浅出webpack之externals的使用

也就是说最终的代码是externals配合libraryTarget一起使用,如果去掉umd的话,会报这个错误

深入浅出webpack之externals的使用

相应的源码是这样子

深入浅出webpack之externals的使用

就是说我不知道通过那种方式输出,所以我应该告诉webpack,我通过umd方式输出,即将你的 lodash 暴露为所有的模块定义下都可运行的方式。它将在 CommonJS, AMD 环境下运行,或将模块导出到 global 下的变量.加上umd的源码如下

深入浅出webpack之externals的使用

看到了吧,我通过require('lodash')引入模块,输出走的是commonjs规范,贴下最终的配置

entry: {
  main: './src/index.js'
 },
 externals: {
  jquery: "jQuery",
  lodash: {
   commonjs: 'lodash',
   commonjs2: 'lodash',
   amd: 'lodash',
   root: '_'
  }
 },
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname,'dist'),
  libraryTarget: 'umd'
 },

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

Javascript 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
基于JSONP原理解析(推荐)
Dec 04 #Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 #Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 #Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 #Javascript
Angular之toDoList的实现代码示例
Dec 02 #Javascript
You might like
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
treepanel动态加载数据实现代码
2012/12/15 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
互动出版网:专业书籍
2017/03/21 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
学校介绍信范文
2014/01/14 职场文书
师范学院教师自荐书
2014/01/31 职场文书
业务员简历自我评价
2014/03/06 职场文书
大学生村官考核材料
2014/05/23 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js