本篇文章給大家分享的是有關(guān)externals怎么在webpack中使用，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

專業(yè)從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作,高端網(wǎng)站制作設(shè)計(jì),微信平臺(tái)小程序開(kāi)發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用html5+CSS3前端渲染技術(shù)，響應(yīng)式網(wǎng)站，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

我們通常在做項(xiàng)目時(shí)可能會(huì)把第三方庫(kù)打包到bundle中，比如下面這張圖

如果不想把第三方庫(kù)打包到bundle中，這就有了externals。官方的使用externals比較簡(jiǎn)單

externals

官網(wǎng)文檔解釋的很清楚，就是webpack可以不處理應(yīng)用的某些依賴庫(kù)，使用externals配置后，依舊可以在代碼中通過(guò)CMD、AMD或者window/global全局的方式訪問(wèn)。

只需三步——

1.在HTML中引入第三方庫(kù)的cdn

2.在webpack中配置externals

externals: {
 jquery: "jQuery",
}

3.在js中引用

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

好，現(xiàn)在我們可以隨心所欲的使用jquery插件并保證不會(huì)打包到bundle中。external是怎么辦到的呢？下面我們通過(guò)bundle的源碼來(lái)分析下原理。

這里的/* 0 */和__webpack_require__分別指打包前js對(duì)應(yīng)的模塊函數(shù)，這里就不細(xì)說(shuō)了。這里可以看到module.exports = jQuery，就是說(shuō)我們externals中的key指的是require的東西，value指的就是它，就是說(shuō)“當(dāng)require的參數(shù)是jquery的時(shí)候，使用jQuery這個(gè)全局變量引用它”。這種最簡(jiǎn)潔的externals配置方式為默認(rèn)的global模式，就是在window上掛一個(gè)全局變量，然后直接可以使用這個(gè)變量。具體的流程是這樣，我們?cè)谠创a中使用require('jquery')后，可以直接把jquery加到externals中，得到一個(gè)打包的trunk.js，但是在引入這個(gè)trunkjs之前，肯定要先引入jquery這個(gè)庫(kù)文件，這個(gè)庫(kù)文件會(huì)創(chuàng)建一個(gè)全局變量jQuery，而咱們的trunkjs中externals的jquery是global模式，所以實(shí)際上trunkjs引入jquery的時(shí)候，就會(huì)從全局變量中引用，即module.export = jQuery

當(dāng)然，既然是通過(guò)這種externals方式，其實(shí)我們可以不用require引入，直接使用全局變量也是可以的。

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

大家如果注意到我剛說(shuō)過(guò)的global模式的話，沒(méi)錯(cuò)，你也許已經(jīng)猜到了，我可以任意的使用不同的輸出方式。如果打包文件我想運(yùn)行到node環(huán)境下，我得使用commonjs規(guī)范，所以你要這么寫(xiě)。

externals: {
 jquery: "commonjs2 jQuery",
}

打包后會(huì)是這樣子。

然后我的項(xiàng)目中還用到了lodash，也想把它從bundle中移除，之前我的代碼是這樣子，引的是npm包

現(xiàn)在我們的externals配置如下

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

}

我們必須要去掉這個(gè)const ，否則的話會(huì)報(bào)一個(gè)錯(cuò)誤 lodash is not defined。為什么會(huì)這樣呢？因?yàn)槲覀兊膌odash輸出是global格式的，我在這里先賣一個(gè)關(guān)子，我們先統(tǒng)一一下輸出格式，加一個(gè)libraryTarget字段

這個(gè)東西是干嘛用的呢？

他是我們輸出文件的模塊化規(guī)范，想想我們上面配置的commonjs jquery是運(yùn)行在node下，總之記住一句話——我們最長(zhǎng)使用的模塊化方案是commonjs2和umd，前者是為node環(huán)境，后者是為瀏覽器環(huán)境。一共有這幾種規(guī)范：

"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

然后報(bào)這個(gè)錯(cuò)誤，也就是說(shuō)我們的模塊沒(méi)有正確的輸出，回到我們的externals，它更多的是指定當(dāng)你引用一個(gè)包的時(shí)候，這個(gè)包(lodash)應(yīng)該遵循哪種模塊化方式(common,root,amd等等)引入，這意思就是說(shuō)，打包的時(shí)候不需要關(guān)心他到底怎么輸出。

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

ok，記得要將之前的覆蓋掉，替換成下面的require，因?yàn)樵趀xternals中我們規(guī)范的commmonjs規(guī)范為lodash

也就是說(shuō)，這就是我們最初的代碼，即沒(méi)有用過(guò)externals時(shí)候的代碼，看，也就是說(shuō)我們只需要配置externals和libraryTarget就可以，其他的業(yè)務(wù)邏輯代碼不需要改變。包括我們的項(xiàng)目中還用了echarts，這個(gè)通通不用改變?。。。。?/p>

也就是說(shuō)最終的代碼是externals配合libraryTarget一起使用，如果去掉umd的話，會(huì)報(bào)這個(gè)錯(cuò)誤

相應(yīng)的源碼是這樣子

就是說(shuō)我不知道通過(guò)那種方式輸出，所以我應(yīng)該告訴webpack，我通過(guò)umd方式輸出,即將你的 lodash 暴露為所有的模塊定義下都可運(yùn)行的方式。它將在 CommonJS, AMD 環(huán)境下運(yùn)行，或?qū)⒛K導(dǎo)出到 global 下的變量.加上umd的源碼如下

看到了吧，我通過(guò)require('lodash')引入模塊，輸出走的是commonjs規(guī)范,貼下最終的配置

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'
 },

以上就是externals怎么在webpack中使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：externals怎么在webpack中使用
當(dāng)前鏈接：http://m.rwnh.cn/article24/jcgjce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、微信小程序、移動(dòng)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)