详解JS: reduce方法实现 webpack多文件入口


Posted in Javascript onFebruary 14, 2017

1. reduce 方法介绍

1.1 简单场景

reduce 函数的设计意图就是方便进行叠加运算:

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

// reduce 实现累加
var total = arr.reduce(function (pre, cur){
 return 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,不断进行叠加,完成最简单的数组累加。

1.2 两种简单的运用场景

第一个 demo,使用 reduce 函数进行二维数组的拼接:

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

// reduce 实现数组拼接
var result = arr.reduce(function (pre, cur){
 return pre.concat(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){
 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 函数,能为我们节省不少中间变量和代码。

2. 用于实现 webpack 多文件入口配置

webpack 配置项中entry参数用于配置入口文件路径,通常对于只打包一个目录下的文件,只需要遍历该目录,构造一个如下的对象传递给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'
// }

对于多页面应用的开发场景,也许会需要构造类似于下面这样的一个对象:

// 多个入口,页面、公共组件并不一定在同一个目录下
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'
};

可以发现,我们要打包的页面、公共组件不一定在同一个目录下,这时候就需要对原先的方法进行扩展,见代码:

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 为数组,则进行两级遍历
  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;
 }, {});
};

// 构造对象
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 也可以设为一个数组
var entryPath = ['./fe/pages', './fe/components'];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
如何快速上手Vuex
Feb 14 #Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 #Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 #Javascript
Vue组件开发初探
Feb 14 #Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
js中json处理总结之JSON.parse
2016/10/14 Javascript
vue-axios使用详解
2017/05/10 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python读取指定日期邮件的实例
2019/02/01 Python
从0开始的Python学习016异常
2019/04/08 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
如何让python的运行速度得到提升
2020/07/08 Python
Django如何批量创建Model
2020/09/01 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
幼师求职自荐信范文
2014/01/26 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
十八届三中全会感言
2014/03/10 职场文书
户外宣传策划方案
2014/05/25 职场文书
讲文明倡议书
2015/04/29 职场文书
2015年暑期见闻
2015/07/14 职场文书
辩论赛新闻稿
2015/07/17 职场文书