reduce 方法實現 webpack 多檔案入口

這篇日誌，在開始接觸 webpack 時候就該寫了，現在發布也許對一些剛入此坑的童鞋能些許幫助。。。

即使有點 low，重要的仍是分享

reduce 函式的設計意圖就是方便進行疊加運算：

var arr = [0, 1, 2, 3];
// reduce 實現累加
var total = arr.reduce(function (pre, cur), 0);
console.log(total);    // 6

上述**中，reduce 方法有兩個引數，第乙個引數是乙個 callback，用於進行計算的函式；第二個引數則是累加計算的初始值: 0

reduce 以 0 作為初始值，從陣列第 0 項開始累加，上述**的計算過程如下：

total = 0;        // => 0
total = 0 + 0;    // => 0
total = 0 + 1;    // => 1
total = 1 + 2;    // => 3
total = 3 + 3;    // => 6

若不設定初始值 0，則 reduce 以陣列第 0 項作為初始值，從第 1 項開始累加，其計算過程如下：

total = 0;        // => 0
total = 0 + 1;    // => 1
total = 1 + 2;    // => 3
total = 3 + 3;    // => 6

可以看出，reduce 函式根據初始值 0，不斷進行疊加，完成最簡單的陣列累加。

第乙個 demo，使用 reduce 函式進行二維陣列的拼接：

var arr = [ [0], [1, 2], [3, 4, 5] ];
// reduce 實現陣列拼接
var result = arr.reduce(function (pre, cur), );
console.log(result);    // [0, 1, 2, 3, 4, 5]

第二個 demo，使用 reduce 函式構造 json 陣列：

// 此例演示：將所有員工的姓名進行拆分
var staff = ['bob dell', 'johon jobs', 'maria july'];
// reduce 構造 json 陣列
var result = staff.reduce(function (arr, full_name));
return arr;
}, );
console.log(json.stringify(result));
//  [,,]

靈活使用 reduce 函式，能為我們節省不少中間變數和**。

webpack 配置項中entry引數用於配置入口檔案路徑，通常對於只打包乙個目錄下的檔案，只需要遍歷該目錄，構造乙個如下的物件傳遞給entry即可：

// 注：index.js 為每個頁面的入口檔案，所有頁面均在 ./fe/pages/ 目錄下
var entry = ;

通常，我們使用 reduce 方法來遍歷同一目錄下的入口：

var fs = require('fs');
var path = require('path');
...// 定義入口路徑
var entrypath = './fe/pages';
// 遍歷路徑下多檔案入口
var entris = fs.readdirsync(entrypath).reduce(function (o, filename) , {});
// entry =

對於多頁面應用的開發場景，也許會需要構造類似於下面這樣的乙個物件：

// 多個入口，頁面、公共元件並不一定在同乙個目錄下
var entry = ;

可以發現，我們要打包的頁面、公共元件不一定在同乙個目錄下，這時候就需要對原先的方法進行擴充套件，見**：

var fs = require('fs');
var path = require('path');
...// 定義入口路徑
var entrypath = ['./fe/pages', './fe/components'];
// 遍歷路徑下多檔案入口
var mkentriesmap = function (entrypath));
} else if (typeof(entrypath) == 'object') );
}).reduce(function (prearr, curarr), );
} else 
return path_map.reduce(function (o, file_map)
return o;
}, {});
};// 構造物件
var entris = mkentriesmap(entrypath);
// entry =

這樣做的好處在於，只需配置一開始的entrypath就行了，同時支援單個或多個路徑下的檔案打包：

// entrypath 可以為乙個字串
var entrypath = './fe/pages';
// entrypath 也可以設為乙個陣列
var entrypath = ['./fe/pages', './fe/components'];

如何手動實現reduce 方法函式

與map 的實現 filter 的實現中的迭代方法不一樣，reduce 是歸併方法。reduce 接收兩個引數第二個可選引數是作為歸併基礎的初始值 reduce 方法返回乙個最終的值。表示 arr.reduce function prev,cur,index,arr initialvalue 與之...

陣列reduce 方法

reduce 函式接收的引數和map 類似，乙個函式f，乙個list，但行為和map 不同，reduce 傳入的函式f必須接收兩個引數，reduce 對list的每個元素反覆呼叫函式f，並返回最終結果值。例子def f x,y return x y reduce f,1,3,5,7,9 返回結果為2...

陣列 reduce 方法

reduce 是接受乙個函式作為累加器，陣列中每乙個值從左到右計算成乙個值 arr.reduce callback,initialvaluce 1.previousvalue 上一次呼叫返回的值或者是提供的初始值 initialvalue 2.currentvalue 陣列當前被處理的元素 3.in...

reduce 方法實現 webpack 多檔案入口

如何手動實現reduce 方法函式

陣列reduce 方法

陣列 reduce 方法

相關推薦