详解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 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JsRender for object语法简介
Oct 31 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
python实现接口并发测试脚本
2019/06/25 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
出国导师推荐信
2014/01/16 职场文书
还款承诺书范文
2014/05/20 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技