深⼊浅出webpack之externals的使⽤
我们通常在做项⽬时可能会把第三⽅库打包到bundle中，⽐如下⾯这张图
如果不想把第三⽅库打包到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的源码来分析下原理。
这⾥的/* 0 */和__webpack_require__分别指打包前js对应的模块函数，这⾥就不细说了。这⾥可以看到ports = 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的时候，就会从全局变量中引⽤，即port = jQuery
jquery在线库
当然，既然是通过这种externals⽅式，其实我们可以不⽤require引⼊，直接使⽤全局变量也是可以的。
jQuery("#content").html("<h1>hello world</h1>");
⼤家如果注意到我刚说过的global模式的话，没错，你也许已经猜到了，我可以任意的使⽤不同的输出⽅式。如果打包⽂件我想运⾏到node环境下，我得使⽤commonjs规范，所以你要这么写。
externals: {
jquery: "commonjs2 jQuery",
}
打包后会是这样⼦。
然后我的项⽬中还⽤到了lodash，也想把它从bundle中移除，之前我的代码是这样⼦，引的是npm包
现在我们的externals配置如下
externals: {
jquery: "jQuery",
_: "lodash"
}
格式的，我在这⾥先卖⼀个关⼦，我们先统⼀⼀下输出格式，加⼀个libraryTarget字段
这个东西是⼲嘛⽤的呢？
他是我们输出⽂件的模块化规范，想想我们上⾯配置的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 ports: ports = xxx
"amd" - Export to AMD (optionally named - set the name via the library option)
"umd" - Export to AMD, CommonJS2 or as property in root
然后报这个错误，也就是说我们的模块没有正确的输出，回到我们的externals，它更多的是指定当你引⽤⼀个包的时候，这个包(lodash)应该遵循哪种模块化⽅式(common,root,amd等等)引⼊，这意思就是说，打包的时候不需要关⼼他到底怎么输出。
externals: {
jquery: "jQuery",
lodash: {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_'
}
},
ok，记得要将之前的覆盖掉，替换成下⾯的require，因为在externals中我们规范的commmonjs规范为lodash
也就是说，这就是我们最初的代码，即没有⽤过externals时候的代码，看，也就是说我们只需要配置externals和libraryTarget 就可以，其他的业务逻辑代码不需要改变。包括我们的项⽬中还⽤了echarts，这个通通不⽤改变
也就是说最终的代码是externals配合libraryTarget⼀起使⽤，如果去掉umd的话，会报这个错误
相应的源码是这样⼦
就是说我不知道通过那种⽅式输出，所以我应该告诉webpack，我通过umd⽅式输出，即将你的 lodash 暴露为所有的模块定义下都可运⾏的⽅式。它将在 CommonJS, AMD 环境下运⾏，或将模块导出到 global 下的变量.加上umd的源码如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。