webpack之externals

描述: external顾名思义外部的、外面的,这个参数主要作用就是,可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。 有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,想依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。 这时,我们便需要在webpack.conf.js文件中配置externals module.exports = { ... output: { ... libraryTarget: "umd" }, externals: { jquery: "jQuery" }, ... } 我们可以看看编译后的文件 ({ 0: function(...) { var jQuery = require(1); /* ... / }, 1: function(...) { // 很明显这里是把window.jQuery赋值给了module.exports // 因此我们便可以使用require来引入了。 module.exports = jQuery; }, / ... */ }); 看一个我们自己的例子 假设我们自己有个工具库,tools.js,它并没有提供给我们UMD的那些功能,只是使用window或者global的方式把工具的对象tools暴露出来 window.Tools = { add: function(num1, num2) { return num1 + num2; } } 接下来把它放在任何页面能够引用到的地方,例如CDN,用script的方式引入页面 // 引入 // 一般来说我们可能会直接就这么用了 const res = Tools.add(1,2); 但是既然我们是模块化开发,当然要杜绝一切全局变量了,我们要用require的方式 const tools = require('mathTools') const res = tools.add(1,2); 这时我们再来webpack.conf.js文件中配置一些externals即可 module.exports = { ... output: { ... libraryTarget: "umd" }, externals: { mathTools: "Tools" }, ... } 这里其实是相当于对tools.js进行了shimming处理。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):