reduce 方法實(shí)現(xiàn) webpack 多文件入口

Little_XM 發(fā)布于2019-08-20 15:59 / 2036人閱讀

摘要：這篇日志，在開始接觸時(shí)候就該寫了，現(xiàn)在發(fā)布也許對(duì)一些剛?cè)氪丝拥耐苄┰S幫助。。。

這篇日志，在開始接觸 webpack 時(shí)候就該寫了，現(xiàn)在發(fā)布也許對(duì)一些剛?cè)氪丝拥耐苄┰S幫助。。。
即使有點(diǎn) low，重要的仍是分享

1. reduce 方法介紹 1.1 簡(jiǎn)單場(chǎng)景

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)行疊加，完成最簡(jiǎn)單的數(shù)組累加。

1.2 兩種簡(jiǎn)單的運(yùn)用場(chǎng)景

第一個(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ā)場(chǎng)景，也許會(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"];

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明作者、出處

云服務(wù)器 GPU云服務(wù)器 reduce方法數(shù)組方法reduce 框架入口文件應(yīng)用入口文件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82645.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Little_XM

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

gatling學(xué)習(xí)筆記（一）——概念理解

閱讀 1642·2021-10-12 10:11
修羅云：成立兩周年特惠，有深港IPCL、香港HKT、廣州、中山、徐州、杭州、佛山等，最低6折起

閱讀 3759·2021-09-03 10:35
表單密碼自動(dòng)填充hack

閱讀 1444·2019-08-30 15:55
小程序自定義switch組件

閱讀 2130·2019-08-30 15:54
H5項(xiàng)目常見問題及注意事項(xiàng)

閱讀 1001·2019-08-30 13:07
vw+rem移動(dòng)端自適應(yīng)布局

閱讀 1015·2019-08-30 11:09
翻譯 | 深入理解CSS時(shí)序函數(shù)

閱讀 581·2019-08-29 13:21
自制jq分頁插件

閱讀 2652·2019-08-29 11:32

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

reduce 方法實(shí)現(xiàn) webpack 多文件入口

相關(guān)文章

基于Redux架構(gòu)的單頁應(yīng)用開發(fā)總結(jié)

webpack4 中的最新 React全家桶實(shí)戰(zhàn)使用配置指南！

微信小程序模塊化開發(fā)實(shí)踐

todolist for react redux 學(xué)習(xí)總結(jié)

webpack工程化集成React技術(shù)棧（一）

發(fā)表評(píng)論

0條評(píng)論

Little_XM

男|高級(jí)講師

TA的文章

gatling學(xué)習(xí)筆記（一）——概念理解

修羅云：成立兩周年特惠，有深港IPCL、香港HKT、廣州、中山、徐州、杭州、佛山等，最低6折起

表單密碼自動(dòng)填充hack

小程序自定義switch組件

H5項(xiàng)目常見問題及注意事項(xiàng)

vw+rem移動(dòng)端自適應(yīng)布局

翻譯 | 深入理解CSS時(shí)序函數(shù)

自制jq分頁插件

最新活動(dòng)