这篇日记,在最先打仗 webpack 时刻就该写了,如今宣布或许对一些刚入此坑的童鞋能些许协助。。。
纵然有点 low,主要的还是分享
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'];
原创文章,转载请说明作者、出处