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

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

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

這篇日志，在開始接觸 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"];

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82645.html

發(fā)表評論

登陸后可評論

0條評論

Little_XM

男|高級講師

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

TA的文章

gatling學習筆記（一）——概念理解

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

閱讀 3837·2021-09-03 10:35
表單密碼自動填充hack

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

閱讀 2204·2019-08-30 15:54
H5項目常見問題及注意事項

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評論

0條評論

Little_XM

男|高級講師

TA的文章

gatling學習筆記（一）——概念理解

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

表單密碼自動填充hack

小程序自定義switch組件

H5項目常見問題及注意事項

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

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

自制jq分頁插件

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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