node 脚本实现自动生成vue路由配置？

一小段代码实现js常用类型检查

本身是一个方法返回入参的类型（首字母大写），
getType["is"+类型(首字母大写)] 判断是否为某类型；

const getType= item => {return Object.prototype.toString.call(item).slice(8,-1);}
getType.isNumber = item => getType(item) === "Number";
getType.isString = item => getType(item) === "String";
getType.isArray = item => getType(item) === "Array";
getType.isObject = item => getType(item) === "Object";
getType.isBoolean = item => getType(item) === "Boolean";
getType.isNull = item => getType(item) === "Null";
getType.isUndefined = item => getType(item) === "Undefined";
getType.isFunction = item =>getType(item) === "Function";
getType.isDate = item =>getType(item) === "Date";
module.exports = getType;
复制代码

node中读取某个文件夹下所有某类型文件的路径及文件名

_reatdDir方法 path 为读取的目录，
reg 为匹配文件类型的正则表达式 如/\.(vue|js)$/匹配 vue 和 js 文件
result 为存放结果的容器，由于使用了递归，所以结果集容器应该放到函数体外，然后再外面又封装了一层
reatdDrir 参数比 _reatdDir 少一个resulut ，放在函数体内，当做 _reatdDir方法的入参，亦是返回值；

const fs = require("fs");
const type = require("./type.js");
function _reatdDir(path, reg, result) { // path 读取的目录， reg 文件匹配的正则， result 为结果集
	const pathes = fs.readdirSync(path);
	const fileReg = /\./;
	pathes.forEach(item => {
		if (fileReg.test(item)) { // 判断是否为文件
			if (reg.test(item)) {result.push({ // 判断是否为指定文件
				path: path + "/" + item, // 路径
				name: item.replace(reg, ""), // 文件名
			});}
		} else _reatdDir(path + "/" + item, reg, result); // 文件夹的话 就往下读取
	})	
}

function reatdDrir(path, reg) { // path 读取的目录， reg 文件匹配的正则 返回一个 读取完的数组
	const result = [];
	_reatdDir(path, reg, result);
	return result;
}
复制代码

node中，假设有一堆文件都会暴露对象出来（如vue组件），那么你可以用这个方法将他们集合在一个对象中

function writeExportFile(conf){
	let inputPath = [];
	if (type.isString(conf.inputPath)) inputPath = [conf.inputPath];
	else if (type.isArray(conf.inputPath)) inputPath = conf.inputPath;
	else return;
	
	const result = Array.prototype.concat.apply([],inputPath.map(item => reatdDrir(item, conf.fileReg)));
	let importList,exportList;
	if (conf.exportMode === "node"){
		importList = result.map(item => `const ${item.name} = require("${item.path.replace(conf.importReg,conf.exportReg)}");`).join("\n");
		exportList = `\n\nmodule.exports = {${result.map(item => "\n\t" + item.name + "").join(",")}\n};`;
	}else if (conf.exportMode === "es6"){
		importList=result.map(item=>`import ${item.name} from "${item.path.replace(conf.importReg,conf.exportReg)}"`).join("\n");
		exportList=`\n\nexport default {\n\t${result.map(item=>conf.exportFn ? conf.exportFn(item) : item.name).join(",\n\t")}\n}`
	}
	fs.writeFileSync(conf.outputPath, importList + exportList);
	console.log(conf.succMsg);
}

module.exports = {
	reatdDrir,
	writeExportFile,
}


复制代码

怎么使用

const vuexConf = {
	inputPath: "./src/vuex/stores",
	outputPath: "./src/vuex/config.js",
	fileReg: /\.js$/,
	importReg: /\/src\/vuex/,
	exportReg: "",
	succMsg: "write vuex success!",
	exportMode: "es6",
}
const viewsConf = {
	inputPath: "./src/views",
	outputPath: "./src/router/config.js",
	fileReg: /\.(vue)$/,
	importReg: /\/src/,
	exportReg: ".",
	succMsg: "write views succ!",
	exportMode: "es6",
	exportFn: item => `${item.name.toLowerCase()}: {path: '/${item.name.toLowerCase()}', name:'${item.name.toLowerCase()}', component: ${item.name}}`
}
writeExportFile(vuexConf);
writeExportFile(viewsConf);
复制代码

viewsConf 生成的文件长这样

import Comp from "../views/comp/Comp.vue"
import Comp3D from "../views/comp/Comp3D.vue"
import CompColumn from "../views/comp/CompColumn.vue"
import CompScroll from "../views/comp/CompScroll.vue"
import CompWrap from "../views/comp/CompWrap.vue"
import Game from "../views/game/Game.vue"
import gArena from "../views/game/gArena.vue"
import gCamp from "../views/game/gCamp.vue"
import gFiled from "../views/game/gFiled.vue"
import gHeroEdit from "../views/game/gHeroEdit.vue"
import gHeroList from "../views/game/gHeroList.vue"
import gMapEdit from "../views/game/gMapEdit.vue"
import gMapList from "../views/game/gMapList.vue"
import gShop from "../views/game/gShop.vue"
import gStore from "../views/game/gStore.vue"
import Home from "../views/home/Home.vue"
import Login from "../views/home/Login.vue"
import ImgList from "../views/img/ImgList.vue"
import mathine from "../views/mathine/mathine.vue"

export default {
	comp: {path: '/comp', name:'comp', component: Comp},
	comp3d: {path: '/comp3d', name:'comp3d', component: Comp3D},
	compcolumn: {path: '/compcolumn', name:'compcolumn', component: CompColumn},
	compscroll: {path: '/compscroll', name:'compscroll', component: CompScroll},
	compwrap: {path: '/compwrap', name:'compwrap', component: CompWrap},
	game: {path: '/game', name:'game', component: Game},
	garena: {path: '/garena', name:'garena', component: gArena},
	gcamp: {path: '/gcamp', name:'gcamp', component: gCamp},
	gfiled: {path: '/gfiled', name:'gfiled', component: gFiled},
	gheroedit: {path: '/gheroedit', name:'gheroedit', component: gHeroEdit},
	gherolist: {path: '/gherolist', name:'gherolist', component: gHeroList},
	gmapedit: {path: '/gmapedit', name:'gmapedit', component: gMapEdit},
	gmaplist: {path: '/gmaplist', name:'gmaplist', component: gMapList},
	gshop: {path: '/gshop', name:'gshop', component: gShop},
	gstore: {path: '/gstore', name:'gstore', component: gStore},
	home: {path: '/home', name:'home', component: Home},
	login: {path: '/login', name:'login', component: Login},
	imglist: {path: '/imglist', name:'imglist', component: ImgList},
	mathine: {path: '/mathine', name:'mathine', component: mathine}
}
复制代码

如果我们的路由这样写

import Vue from 'vue';
import config from './config.js';
import Router from 'vue-router';
Vue.use(Router);

const routes = Object.keys(config).map(item=>config[item]);
routes.unshift({
	path: '/', name: 'index', redirect:{ name: "home"}
});
export default new Router({routes})
复制代码

然后我就可以开始建页面文件，路由配置就可以让node 帮我写了，

如果我的views 文件下面不全是页面也有组件咋搞，

我可以以_page.vue 结尾命名页面文件 _comp.vue 结尾命名组件文件。

转载于:https://juejin.im/post/5b86c1916fb9a019d53e957a