详解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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 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
简单谈谈PHP中strlen 函数
2016/02/27 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
会计电算化专业求职信
2014/06/10 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
生日祝酒词大全
2015/08/10 职场文书