如何在webpack中使用require-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在webpack中使用require，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

10年積累的成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有靈川免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

commonjs同步語(yǔ)法

經(jīng)典的commonjs同步語(yǔ)法如下：

var a = require('./a');
a.show();

此時(shí)webpack會(huì)將a.js打包進(jìn)引用它的文件中。這是最普遍的情形，不必贅述。

 commonjs異步加載

在commonjs中有一個(gè)Modules/Async/A規(guī)范，里面定義了require.ensure語(yǔ)法。webpack實(shí)現(xiàn)了它，作用是可以在打包的時(shí)候進(jìn)行代碼分片，并異步加載分片后的代碼。用法如下：

require.ensure([], function(require){

  var list = require('./list');

  list.show();

});

此時(shí)list.js會(huì)被打包成一個(gè)單獨(dú)的chunk文件，大概長(zhǎng)這樣：

1.fb874860b35831bc96a8.js

可讀性比較差。我在上一篇結(jié)尾也提到了，給它命名的方式，那就是給require.ensure傳遞第三個(gè)參數(shù)，如：

require.ensure([], function(require){

  var list = require('./list');

  list.show();

}, 'list');

這樣就能得到你想要的文件名稱：

list.fb874860b35831bc96a8.js

你也可以傳入像"question/list"這樣帶層級(jí)的名字，這樣webpack會(huì)按照層級(jí)給你創(chuàng)建文件夾。

需要注意的是，如果你在require.ensure的函數(shù)中引用了兩個(gè)以上的模塊，webpack會(huì)把它們打包在一起，比如：

require.ensure([], function(require){

  var list = require('./list');

  list.show();

  var edit = require('./edit');

  edit.display();

}, 'list_and_edit');

list.js和edit.js將會(huì)被打包成一個(gè)文件，并命名為list_and_edit.js。這就需要根據(jù)你的實(shí)際情況來(lái)衡量了，如果你不希望打包在一起，只能寫兩個(gè)require.ensure分別引用這兩個(gè)文件。

多說(shuō)一句，這種思維其實(shí)我是很不喜歡的，在編碼階段卻要對(duì)打包的事情做出決策，明顯違背了職責(zé)分離原則。

 commonjs預(yù)加載懶執(zhí)行

在上面的用法中，我們給require.ensure的第一個(gè)參數(shù)傳了空數(shù)組，實(shí)際上這里是可以接收模塊名稱的，作用就是實(shí)現(xiàn)預(yù)加載懶執(zhí)行。用法如下：

require.ensure(['./list'], function(require){

  var list = require('./list');

  list.show();

});

給require.ensure的第一個(gè)參數(shù)傳了['./list']，執(zhí)行到這里的時(shí)候list.js會(huì)被瀏覽器下載下來(lái)，但是并不會(huì)執(zhí)行l(wèi)ist.js模塊中的代碼，也就是webpack官網(wǎng)說(shuō)的，不會(huì)進(jìn)行evaluate。真正進(jìn)行evaluate的時(shí)候是到了后面這句var list = require('./list');這就是所謂的懶執(zhí)行。

寫在函數(shù)中的多個(gè)模塊會(huì)被打包在一起，這一點(diǎn)和上面沒(méi)有區(qū)別。另外，寫在數(shù)組中的模塊也會(huì)跟他們打包在一起，不管你有沒(méi)有手動(dòng)執(zhí)行。

這種寫法也是有點(diǎn)別扭的，像是commonjs和AMD的結(jié)合體，而且一個(gè)模塊名稱還要寫兩次，真是不夠優(yōu)雅。所以webpack自己定義了一個(gè)方法，能夠?qū)崿F(xiàn)預(yù)加載。

 webpack自帶的require.include

require.include是webpack自己提供的，并沒(méi)有什么規(guī)范做后臺(tái)，所以是個(gè)小角色。它可以實(shí)現(xiàn)上面是預(yù)加載功能，而不用把模塊寫在數(shù)組中，用法如下：

require.ensure([], function(require){

  require.include('./list');//此處只加載不執(zhí)行

});

據(jù)webpack官網(wǎng)文檔介紹，require.include還有一個(gè)作用是能把子模塊中的公共部分，提取到父模塊中，比如child1和child2都引用了list.js這個(gè)模塊，那么如果在parent中include了list.js，那么子模塊中的就會(huì)被刪掉，相當(dāng)于提升到了父模塊中。（這里所謂的父子關(guān)系是指引用關(guān)系）

這個(gè)方法官方也是一筆帶過(guò)，看來(lái)也是一個(gè)雞肋的東西，用處不大。因?yàn)槲野l(fā)現(xiàn)require.include的返回值是undefined，也就是說(shuō)，如果你想使用模塊，姿勢(shì)是這樣的：

require.ensure([], function(require){
  require.include('./preview'); //加載
  let p = require('./preview'); //執(zhí)行
  p.getUrl(); //使用
}, 'pre');

AMD異步加載

webpack既支持commonjs規(guī)范也支持AMD規(guī)范，這就意味著AMD的經(jīng)典語(yǔ)法是可以正常使用的，如：

require(['./list'], function(list){

  list.show();

});

當(dāng)然，這樣寫的話list.js也是被單獨(dú)打包成一個(gè)文件的。與上面類似，如果你在這里寫了多個(gè)模塊，那么這些模塊都會(huì)被打包成一個(gè)文件，如：

require(['./list', './edit'], function(list, edit){

  list.show();

  edit.display();

});

list.js和edit.js會(huì)被打包在一起。不同的是，AMD的方式無(wú)法傳入第三個(gè)參數(shù)當(dāng)文件名，所以得不到很好看的文件。

ES6 import

這年頭不用ES6都不好意思跟人打招呼。所以我們的代碼中，又會(huì)多一種模塊引入語(yǔ)法，那就是import。import會(huì)被轉(zhuǎn)化為commonjs格式或者是AMD格式，所以不要把它認(rèn)為是一種新的模塊引用方式。babel默認(rèn)會(huì)把ES6的模塊轉(zhuǎn)化為commonjs規(guī)范的，你也不用費(fèi)勁再把它轉(zhuǎn)成AMD了。

所以如下寫法是等價(jià)的：

import list from './list';

//等價(jià)于

var list = require('./list');

不過(guò)這兩種寫法只需選一種，避免在代碼中同時(shí)使用兩種，否則會(huì)造成混淆。

 總結(jié)

以上把require的用法捋了一遍，明白了各自用法的區(qū)別之后，我們就可以在項(xiàng)目中進(jìn)行選擇了。我覺得最佳選擇是往commonjs方向靠攏，想嘗試ES6的話就用import代替commonjs同步語(yǔ)法即可。

因此，代碼中保持以下兩種風(fēng)格就好：

//可打包在一起的同步代碼，使用import語(yǔ)法

import list from './list';

 

//需要獨(dú)立打包、異步加載的代碼，使用require.ensure

require.ensure([], function(require){

  var list = require('./list');

});

上述就是小編為大家分享的如何在webpack中使用require了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：如何在webpack中使用require-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://bm7419.com/article8/dgdiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、App開發(fā)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作

廣告

聲明：本網(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)