详解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 相关文章推荐
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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的配置文件php.ini
2006/10/09 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP6新特性分析
2016/03/03 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
javascript实现的listview效果
2007/04/28 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python中的多重继承实例讲解
2014/09/28 Python
Python入门篇之面向对象
2014/10/20 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python如何构建mock接口服务
2021/01/28 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
大学班级计划书
2014/04/29 职场文书
python自动化测试之Selenium详解
2022/03/13 Python