JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了详解JS: reduce方法实现 webpack多文件入口大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

1. reduce 方法介绍

1.1 简单场景

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

// reduce 实现累加
var @R_355_10586@l = arr.reduce(function (pre,cur){
return pre + cur;
},0);

console.log(@R_355_10586@l); // 6

上述代码中,reduce 方法有两个参数,第一个参数是一个 callBACk,用于进行计算的函数;第二个参数则是累加计算的初始值: 0

reduce 以 0 作为初始值,从数组第 0 项开始累加,上述代码的计算过程如下:

0 @R_355_10586@l = 0 + 0; // => 0 @R_355_10586@l = 0 + 1; // => 1 @R_355_10586@l = 1 + 2; // => 3 @R_355_10586@l = 3 + 3; // => 6

不设置初始值 0,则 reduce 以数组第 0 项作为初始值,从第 1 项开始累加,其计算过程如下:

0 @R_355_10586@l = 0 + 1; // => 1 @R_355_10586@l = 1 + 2; // => 3 @R_355_10586@l = 3 + 3; // => 6

可以看出,reduce 函数根据初始值 0,不断进行叠加,完成最简单的数组累加。

1.2 两种简单的运用场景

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

[0],[1,2],[3,4,5] ];

// reduce 实现数组拼接
var result = arr.reduce(function (pre,cur){
return pre.concat(cur);
},[]);

console.log(result); // [0,3,5]

第二个 demo,使用 reduce 函数构造 JSON 数组:

// 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: './fe/pages/home/index.js',list: './fe/pages/list/index.js' };

通常,我们使用 reduce 方法来遍历同一目录下的入口:

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'
// }

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

{ index: './fe/pages/home/index.js',list: './fe/pages/list/index.js',header: './fe/components/header/index.js',footer: './fe/components/footer/index.js' };

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

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,'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,'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','./fe/components'];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。

大佬总结

以上是大佬教程为你收集整理的详解JS: reduce方法实现 webpack多文件入口全部内容,希望文章能够帮你解决详解JS: reduce方法实现 webpack多文件入口所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。