node.jsrequire⾃动执⾏脚本并⽣成html，使⽤nodejs⾃动⽣成
前端项⽬组件
脚本编写背景
写这个⼩脚本的初衷是，项⽬本⾝添加⼀个组件太繁琐了，⽐如我想要去建⽴⼀个login的组件，那么我需要⼿动去IDE中，创建index.js(组件出⼝⽂件)，login.js(业务⽂件)，login.html，login.less这四个⽂件。因为每个组件都有⼀些输出的代码，还要把之前组件的那⼏⾏拷贝过来，这种作业真的烦，于是乎写了⼀个⼩脚本去⾃动完成这些功能。
PS：本脚本运⾏环境是nodeV7以上，当前时间2017/07，stable版本还是V6，最新的node版本为V8.1.3(current版本)，如要运⾏，请升级node版本为current版本。
预期效果
在命令⾏输⼊：node set login
在conponents⽂件夹下⾯⾃动⽣成4个⽂件，并填写index.js , login.js的⽂件公共内容。
如果输⼊多层⽂件如： node set login/foo
则会先检测conponents⽂件夹下是否存在login，如不存在，先创建login⽂件夹，然后创建foo的组件。本脚本主要使⽤nodejs的fs模块来完成需求。
fs模块
fs模块⽤于对系统⽂件及⽬录进⾏读写操作，本次主要⽤到的fs模块的功能有：
fs.mkdir(path,callback) 创建⽂件夹，异步，两个必填参数，路径和回掉。
fs.writeFile(path,data,callback) 写⽂件，接受三个参数，⽂件路径，向⽂件中写的数据，回掉。
代码实施
js脚本编程入门流程图
async function creatCpt() {
try {
await exists(); // 检测⽂件夹
await readFile(); // 读取模板内容
await writeFile(await readFile()); //写⼊组件}
catch (err) {
<(err);
}
}
获取命令⾏参数
以node set login为例，想要创建⼀个login⽂件夹，⾸先先要获取命令⾏当中的login。在nodejs当中，获取命令⾏参数使⽤
process.argv这条命令返回⼀个数组，第⼀个参数为的应⽤所在绝对路径，第⼆个参数为当前脚本所在的绝对路径，之后所输⼊的参数以空格分隔，如输⼊node set aaa，得到：
检测⽂件夹是否存在
let exists = function () {
return new Promise((res) => {
(async function () {
for (let a of path) {
}
res(basepath);
})()
})
}
判断是否存在⽂件夹，如果存在，重新拼接路径继续检查，如不存在则⽣成⽂件夹。
创建⽂件夹
node set foo/bar
let mkdir = function (a) {
return new Promise((res, rej) => {
fs.mkdir(basepath + a, (err) => {
if (err) rej(err);
basepath = `${basepath}${a}/`
res(basepath);
});
})
}
创建⽂件夹成功后，重新拼接路径，以便于继续查。
读取模板内容
let reads = [`${basepath}cptTemp/index.js`, `${basepath}cptTemp/cptTemp.js`];//要读取的⽂件
let readFile = function () {
return new Promise((res) => {
for (let a of reads) {
let text = fs.readFileSync(a).toString();
text = place(/time/g, moment().format('YYYY/MM/DD'))
.replace(/temp/g, name);
file.push(text)
}
res(file);
})
}
每个⽣成好的⽂件都需要⼀个创建的时间，及作者，包括⽂件的输出，以及class等结构，这些都是⽐较公⽤的，把他们写在模板当中，然后读取出来，替换其中的关键词，如时间，组件名等。
⽣成⽂件并写⼊内容
提前建⽴好要⽣成的⽂件和要读取的⽂件。如：
let writes = [`${name}.js`, `${name}.html`, `${name}.less`, `index.js`];
let writeFile = function (file) {
return new Promise((res, rej) => {
(async function () {
for (let a of writes) {
await fs.writeFile(`${basepath}${a}`,
a == writes[3] ? file[0] : a == writes[0] ? file[1] : '', (err) => {
if (err) rej(err)
})
}
res('succ');
})()
})
}
⽬前只写了2个要读取的模板，在⽣成⽂件之后，会将模板中的内容填充进去。
总结
以上就完成了⼀个⾃动⽣成前端项⽬组件的⼩脚本了，当然，还可以继续扩充，⽐如这些组件其实还需要再到，组件管理的那个js中去注⼊，这些都可以⽤脚本完成，本⽂就到这⾥为⽌了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。