詳解JS: reduce方法實(shí)現(xiàn) webpack多文件入口
更新時(shí)間：2017年02月14日 10:55:40 作者：彭逸之
本篇文章主要介紹了詳解JS: reduce方法實(shí)現(xiàn) webpack多文件入口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
1. reduce 方法介紹
1.1 簡單場景
reduce 函數(shù)的設(shè)計(jì)意圖就是方便進(jìn)行疊加運(yùn)算：
var arr = [0, 1, 2, 3];
// reduce 實(shí)現(xiàn)累加
var total = arr.reduce(function (pre, cur){
return pre + cur;
}, 0);
console.log(total); // 6
上述代碼中，reduce 方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè) callback，用于進(jìn)行計(jì)算的函數(shù)；第二個(gè)參數(shù)則是累加計(jì)算的初始值: 0
reduce 以 0 作為初始值，從數(shù)組第 0 項(xiàng)開始累加，上述代碼的計(jì)算過程如下：
total = 0; // => 0 total = 0 + 0; // => 0 total = 0 + 1; // => 1 total = 1 + 2; // => 3 total = 3 + 3; // => 6
若不設(shè)置初始值 0，則 reduce 以數(shù)組第 0 項(xiàng)作為初始值，從第 1 項(xiàng)開始累加，其計(jì)算過程如下：
total = 0; // => 0 total = 0 + 1; // => 1 total = 1 + 2; // => 3 total = 3 + 3; // => 6
可以看出，reduce 函數(shù)根據(jù)初始值 0，不斷進(jìn)行疊加，完成最簡單的數(shù)組累加。
1.2 兩種簡單的運(yùn)用場景
第一個(gè) demo，使用 reduce 函數(shù)進(jìn)行二維數(shù)組的拼接：
var arr = [ [0], [1, 2], [3, 4, 5] ];
// reduce 實(shí)現(xiàn)數(shù)組拼接
var result = arr.reduce(function (pre, cur){
return pre.concat(cur);
}, []);
console.log(result); // [0, 1, 2, 3, 4, 5]
第二個(gè) demo，使用 reduce 函數(shù)構(gòu)造 JSON 數(shù)組：
// 此例演示：將所有員工的姓名進(jìn)行拆分
var staff = ['Bob Dell', 'Johon Jobs', 'Maria July'];
// reduce 構(gòu)造 JSON 數(shù)組
var result = staff.reduce(function (arr, full_name){
arr.push({
first_name: full_name.split(' ')[0],
last_name: full_name.split(' ')[1]
});
return arr;
}, []);
console.log(JSON.stringify(result));
// [{"first_name":"Bob","last_name":"Dell"},{"first_name":"Johon","last_name":"Jobs"},{"first_name":"Maria","last_name":"July"}]
靈活使用 reduce 函數(shù)，能為我們節(jié)省不少中間變量和代碼。
2. 用于實(shí)現(xiàn) webpack 多文件入口配置
webpack 配置項(xiàng)中entry參數(shù)用于配置入口文件路徑，通常對(duì)于只打包一個(gè)目錄下的文件，只需要遍歷該目錄，構(gòu)造一個(gè)如下的對(duì)象傳遞給entry即可：
// 注：index.js 為每個(gè)頁面的入口文件，所有頁面均在 ./fe/pages/ 目錄下
var entry = {
index: './fe/pages/home/index.js',
list: './fe/pages/list/index.js'
};
通常，我們使用 reduce 方法來遍歷同一目錄下的入口：
var fs = require('fs');
var path = require('path');
...
// 定義入口路徑
var entryPath = './fe/pages';
// 遍歷路徑下多文件入口
var entris = fs.readdirSync(entryPath).reduce(function (o, filename) {
!/\./.test(filename) &&
(o[filename] = './' + path.join(entryPath, filename, 'index.js'));
return o;
}, {});
// entry = {
// index: './fe/pages/home/index.js',
// list: './fe/pages/list/index.js'
// }
對(duì)于多頁面應(yīng)用的開發(fā)場景，也許會(huì)需要構(gòu)造類似于下面這樣的一個(gè)對(duì)象：
// 多個(gè)入口，頁面、公共組件并不一定在同一個(gè)目錄下
var entry = {
index: './fe/pages/home/index.js',
list: './fe/pages/list/index.js',
header: './fe/components/header/index.js',
footer: './fe/components/footer/index.js'
};
可以發(fā)現(xiàn)，我們要打包的頁面、公共組件不一定在同一個(gè)目錄下，這時(shí)候就需要對(duì)原先的方法進(jìn)行擴(kuò)展，見代碼：
var fs = require('fs');
var path = require('path');
...
// 定義入口路徑
var entryPath = ['./fe/pages', './fe/components'];
// 遍歷路徑下多文件入口
var mkEntriesMap = function (entryPath){
if (typeof(entryPath) == 'string') { // 若 entryPath 為字符串，則直接遍歷此目錄
var path_map = fs.readdirSync(entryPath).map(function (filename){
return filename + '::./' + path.join(entryPath, filename, 'index.js');
});
} else if (typeof(entryPath) == 'object') { // 若 entryPath 為數(shù)組，則進(jìn)行兩級(jí)遍歷
var path_map = entryPath.map(function (entry){
return fs.readdirSync(entry).map(function (filename){
return filename + '::./' + path.join(entry, filename, 'index.js');
});
}).reduce(function (preArr, curArr){
return preArr.concat(curArr);
}, []);
} else {
throw 'Type of config.entryPath is not valid.';
return;
}
return path_map.reduce(function (o, file_map){
var file_name = file_map.split('::')[0];
var file_path = file_map.split('::')[1];
if (!/\./.test(file_name)) {
o[file_name] = file_path;
}
return o;
}, {});
};
// 構(gòu)造對(duì)象
var entris = mkEntriesMap(entryPath);
// entry = {
// index: './fe/pages/home/index.js',
// list: './fe/pages/list/index.js',
// header: './fe/components/header/index.js',
// footer: './fe/components/footer/index.js'
// }
這樣做的好處在于，只需配置一開始的entryPath就行了，同時(shí)支持單個(gè)或多個(gè)路徑下的文件打包：
// entryPath 可以為一個(gè)字符串 var entryPath = './fe/pages'; // entryPath 也可以設(shè)為一個(gè)數(shù)組 var entryPath = ['./fe/pages', './fe/components'];
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解JS數(shù)組Reduce()方法詳解及高級(jí)技巧
- JavaScript之map reduce_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- 無循環(huán) JavaScript(map、reduce、filter和find)
- Javascript面試經(jīng)典套路reduce函數(shù)查重
- 解析JavaScript數(shù)組方法reduce
- 詳解JavaScript中數(shù)組的reduce方法
- JavaScript reduce和reduceRight詳解
- Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
- JavaScript中自帶的 reduce()方法使用示例詳解
- JavaScript中reduce()方法的使用詳解
- JavaScript mapreduce工作原理簡析
- js數(shù)組方法reduce經(jīng)典用法代碼分享
相關(guān)文章
jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼
這篇文章主要介紹了jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了基于BootStrap的圖片輪播效果展示實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
js實(shí)現(xiàn)圖片上傳即時(shí)顯示效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片上傳即時(shí)顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JS求解兩數(shù)之和算法,結(jié)合實(shí)例形式詳細(xì)分析了JS求解兩數(shù)之和算法相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
uniapp?H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透解決辦法
最近用uin-app做項(xiàng)目遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于uniapp?H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
本文為大家提供一段加入收藏的js代碼以及實(shí)用Jquery更改對(duì)象透明度的代碼，需要的朋友可以參考下2014-01-01
javascript實(shí)現(xiàn)密碼強(qiáng)度顯示
這篇文章主要介紹了使用javascript實(shí)現(xiàn)密碼強(qiáng)度顯示，十分實(shí)用的功能，從個(gè)人項(xiàng)目中移植出來的，分享給大家，希望大家能夠喜歡。2015-03-03
這篇文章主要給大家介紹了關(guān)于javascript中數(shù)組的常用算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
現(xiàn)在手機(jī)網(wǎng)站已經(jīng)很普及了，有時(shí)候前端網(wǎng)頁需要判斷，用戶使用的是手機(jī)瀏覽器還是電腦瀏覽器。這篇文章整理了JavaScript判斷是否手機(jī)瀏覽器的五種方法，通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2022-11-11
js查看一個(gè)函數(shù)的執(zhí)行時(shí)間實(shí)例代碼
本篇文章給大家分享一段實(shí)例代碼，主要介紹js查看一個(gè)函數(shù)的執(zhí)行時(shí)間，代碼簡單易懂，感興趣的朋友一起跟著小編來學(xué)習(xí)學(xué)習(xí)吧2015-09-09