require的五種用法介紹

這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價值，有興趣的小夥伴們可以參考一下

webpack中可以寫commonjs格式的require同步語法，可以寫AMD格式的require回呼語法，還有一個require.ensure，以及webpack自己定義的require.include，再加上ES6的import語法，這麼多豈不是會把人搞亂。本篇就來梳理一下這些req​​uire各自的特點，以及都在什麼場景下使用。

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的原因。gulp那样多好，编码就是编码，编译就是编译，分开来。不过这就是webpack以模块为核心的打包方式的特点吧，仁者见仁，只要团队内做一个约定，也不会打的一塌糊涂。

以上是require的五種用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！