[web前端] JS: reduce 方法實現(xiàn) webpack 多文件入口

這篇日志尘应,在開始接觸 webpack 時候就該寫了比庄,現(xiàn)在發(fā)布也許對一些剛?cè)氪丝拥耐苄┰S幫助寇漫。嘴瓤。斋竞。
即使有點 low益眉,重要的仍是分享

1. reduce 方法介紹

1.1 簡單場景

reduce 函數(shù)的設(shè)計意圖就是方便進行疊加運算:

var arr = [0, 1, 2, 3];

// reduce 實現(xiàn)累加
var total = arr.reduce(function (pre, cur){
  return pre + cur;
}, 0);

console.log(total);    // 6

上述代碼中陕壹,reduce 方法有兩個參數(shù)应狱,第一個參數(shù)是一個 callback共郭,用于進行計算的函數(shù);第二個參數(shù)則是累加計算的初始值: 0
reduce 以 0 作為初始值,從數(shù)組第 0 項開始累加除嘹,上述代碼的計算過程如下:

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

若不設(shè)置初始值 0写半,則 reduce 以數(shù)組第 0 項作為初始值,從第 1 項開始累加尉咕,其計算過程如下:

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

可以看出叠蝇,reduce 函數(shù)根據(jù)初始值 0,不斷進行疊加年缎,完成最簡單的數(shù)組累加悔捶。

1.2 兩種簡單的運用場景

第一個 demo,使用 reduce 函數(shù)進行二維數(shù)組的拼接:

var arr = [ [0], [1, 2], [3, 4, 5] ];

// reduce 實現(xiàn)數(shù)組拼接
var result = arr.reduce(function (pre, cur){
  return pre.concat(cur);
}, []);

console.log(result);    // [0, 1, 2, 3, 4, 5]

第二個 demo单芜,使用 reduce 函數(shù)構(gòu)造 JSON 數(shù)組:

// 此例演示:將所有員工的姓名進行拆分
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. 用于實現(xiàn) webpack 多文件入口配置

webpack 配置項中entry參數(shù)用于配置入口文件路徑缓溅,通常對于只打包一個目錄下的文件蛇损,只需要遍歷該目錄,構(gòu)造一個如下的對象傳遞給entry即可:

// 注:index.js 為每個頁面的入口文件坛怪,所有頁面均在 ./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'
// }

對于多頁面應(yīng)用的開發(fā)場景袜匿,也許會需要構(gòu)造類似于下面這樣的一個對象:

// 多個入口,頁面居灯、公共組件并不一定在同一個目錄下
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)祭务,我們要打包的頁面怪嫌、公共組件不一定在同一個目錄下,這時候就需要對原先的方法進行擴展岩灭,見代碼:

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ù)組噪径,則進行兩級遍歷
    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)造對象
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就行了找爱,同時支持單個或多個路徑下的文件打包:

// entryPath 可以為一個字符串
var entryPath = './fe/pages';

// entryPath 也可以設(shè)為一個數(shù)組
var entryPath = ['./fe/pages', './fe/components'];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市车摄,隨后出現(xiàn)的幾起案子珍德,更是在濱河造成了極大的恐慌,老刑警劉巖矗漾,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件锈候,死亡現(xiàn)場離奇詭異,居然都是意外死亡敞贡,警方通過查閱死者的電腦和手機泵琳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來誊役,“玉大人获列,你說我怎么就攤上這事』坠福” “怎么了击孩?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鹏漆。 經(jīng)常有香客問我巩梢,道長,這世上最難降的妖魔是什么艺玲? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任括蝠,我火速辦了婚禮,結(jié)果婚禮上饭聚,老公的妹妹穿的比我還像新娘忌警。我一直安慰自己,他們只是感情好秒梳,可當我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布法绵。 她就那樣靜靜地躺著,像睡著了一般酪碘。 火紅的嫁衣襯著肌膚如雪朋譬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天婆跑,我揣著相機與錄音此熬,去河邊找鬼。 笑死滑进,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的募谎。 我是一名探鬼主播扶关,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼数冬!你這毒婦竟也來了节槐?” 一聲冷哼從身側(cè)響起搀庶,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎铜异,沒想到半個月后哥倔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡揍庄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年咆蒿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚂子。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡沃测,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蒂破,到底是詐尸還是另有隱情别渔,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布挟秤,位于F島的核電站抄伍,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏攀甚。R本人自食惡果不足惜岗喉,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荚斯。 院中可真熱鬧查牌,春花似錦事期、人聲如沸纸颜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稠鼻。三九已至,卻和暖如春候齿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背怨咪。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工润匙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人孕讳。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓厂财,卻偏偏與公主長得像,于是被迫代替她去往敵國和親璃饱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,241評論 0 4
  • 由于最近都在freecodecamp上刷代碼,運用了很多JavaScript數(shù)組的方法谒撼,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 1,984評論 0 16
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理廓潜,服務(wù)發(fā)現(xiàn),斷路器辩蛋,智...
    卡卡羅2017閱讀 134,720評論 18 139
  • 第三章 類型、值和變量 1擂错、存取字符串樱蛤、數(shù)字或布爾值的屬性時創(chuàng)建的臨時對象稱做包裝對象,它只是偶爾用來區(qū)分字符串值...
    坤少卡卡閱讀 643評論 0 1
  • 博爾赫斯說爽醋,時間是遺忘便脊,也是回憶。 1.巧合 我跟搖滾哪痰,八桿子都打不著任何關(guān)系。搖滾的黃金十年晌杰,我都還沒上學,每天...
    弗蘭克大叔閱讀 847評論 0 2