如何在webpack中使用require

這期內容當中小編將會給大家帶來有關如何在webpack中使用require，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

commonjs同步語法

經典的commonjs同步語法如下：

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

此時webpack會將a.js打包進引用它的文件中。這是最普遍的情形，不必贅述。

 commonjs異步加載

在commonjs中有一個Modules/Async/A規范，里面定義了require.ensure語法。webpack實現了它，作用是可以在打包的時候進行代碼分片，并異步加載分片后的代碼。用法如下：

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

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

  list.show();

});

此時list.js會被打包成一個單獨的chunk文件，大概長這樣：

1.fb874860b35831bc96a8.js

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

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

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

  list.show();

}, 'list');

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

list.fb874860b35831bc96a8.js

你也可以傳入像"question/list"這樣帶層級的名字，這樣webpack會按照層級給你創建文件夾。

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

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

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

  list.show();

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

  edit.display();

}, 'list_and_edit');

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

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

 commonjs預加載懶執行

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

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

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

  list.show();

});

給require.ensure的第一個參數傳了['./list']，執行到這里的時候list.js會被瀏覽器下載下來，但是并不會執行list.js模塊中的代碼，也就是webpack官網說的，不會進行evaluate。真正進行evaluate的時候是到了后面這句var list = require('./list');這就是所謂的懶執行。

寫在函數中的多個模塊會被打包在一起，這一點和上面沒有區別。另外，寫在數組中的模塊也會跟他們打包在一起，不管你有沒有手動執行。

這種寫法也是有點別扭的，像是commonjs和AMD的結合體，而且一個模塊名稱還要寫兩次，真是不夠優雅。所以webpack自己定義了一個方法，能夠實現預加載。

 webpack自帶的require.include

require.include是webpack自己提供的，并沒有什么規范做后臺，所以是個小角色。它可以實現上面是預加載功能，而不用把模塊寫在數組中，用法如下：

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

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

});

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

這個方法官方也是一筆帶過，看來也是一個雞肋的東西，用處不大。因為我發現require.include的返回值是undefined，也就是說，如果你想使用模塊，姿勢是這樣的：

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

AMD異步加載

webpack既支持commonjs規范也支持AMD規范，這就意味著AMD的經典語法是可以正常使用的，如：

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

  list.show();

});

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

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

  list.show();

  edit.display();

});

list.js和edit.js會被打包在一起。不同的是，AMD的方式無法傳入第三個參數當文件名，所以得不到很好看的文件。

ES6 import

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

所以如下寫法是等價的：

import list from './list';

//等價于

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

不過這兩種寫法只需選一種，避免在代碼中同時使用兩種，否則會造成混淆。

 總結

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

因此，代碼中保持以下兩種風格就好：

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

import list from './list';

 

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

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

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

});

上述就是小編為大家分享的如何在webpack中使用require了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。