摘要：代码实施流程图检测文件夹读取模板内容写入组件获取命令行参数以为例，想要创建一个文件夹，首先先要获取命令行当中的。
脚本编写背景
写这个小脚本的初衷是，项目本身添加一个组件太繁琐了，比如我想要去建立一个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.existsSync(path) 检测文件夹是否存在，一个同步的API，只接受一个路径参数，当前版本异步的废弃了。
fs.mkdir(path,callback) 创建文件夹，异步，两个必填参数，路径和回掉。
fs.readFileSync(path) 读取文件，接受一个参数，文件路径。
fs.writeFile(path,data,callback) 写文件，接受三个参数，文件路径，向文件中写的数据，回掉。
代码实施 流程图async function creatCpt() {
try {
await exists(); // 检测文件夹
await readFile(); // 读取模板内容
await writeFile(await readFile()); //写入组件
}
catch (err) {
console.error(err);
}
}
获取命令行参数
以node set login为例，想要创建一个login文件夹，首先先要获取命令行当中的login。在nodejs当中，获取命令行参数使用process.argv这条命令返回一个数组，第一个参数为nodejs.exe的应用所在绝对路径，第二个参数为当前脚本所在的绝对路径，之后所输入的参数以空格分隔，如输入node set aaa,得到：
let exists = function () {
return new Promise((res) => {
(async function () {
for (let a of path) {
fs.existsSync(basepath + a) ? basepath = `${basepath}${a}/` : await mkdir(a);
}
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 = text.replace(/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中去注入，这些都可以用脚本完成，本文就到这里为止了。
项目地址：https://github.com/jiwenjiang...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83942.html
摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目 整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...
摘要：所以前端工程师不仅仅是写好页面和做好兼容性。对前端工程师的技术能力也会带来考验。这里想要说的是，如果使用了，使用了服务端渲染，对于前端工程师的个人素质要求会比较高，因为需要处理很多服务端的问题。 背景 我们团队有个项目由于开发时间较长，且是前后端杂糅的开发方式，维护成本很高，在线上暴露的问题很多。而且因为对接了公司一百多条产品线，每天都会接到大量的客诉和产品线反馈的问题。2017年11...
摘要：中国开发者的年度盛会中国开发者大会，于年月日在杭州举办了本年度的杭会议我们的和将为在现场为您带来现场的报道，一览大牛风采，直击技术热点。签到中第日的会议即将开幕以下是与参会者和与博文视点的作者们合影 中国JS开发者的年度盛会JS中国开发者大会，于2014年6月21日在杭州举办了本年度的杭JS会议！ 我们SegmentFault的 @integ 和 @shamiao 将为在现场为您带来...
摘要：背景前段时间大部门下新成立了一个推广百度文字识别图像识别等科技能力在金融领域应用的子部门。而且在百度内部提倡的也是使用和。百度内部有现成的服务接入文档。 背景： 前段时间大部门下新成立了一个推广百度OCR、文字识别、图像识别等科技能力在金融领域应用的子部门。因为部门刚成立，基础设施和人力都是欠缺的。当时分到我们部门的任务是抽调一个人做新部门主站前端开发工作。本来说的是只负责页面的开发工...
阅读 1707·2023-04-26 01:02
阅读 4854·2021-11-24 09:39
阅读 1806·2019-08-30 15:44
阅读 2885·2019-08-30 11:10
阅读 1786·2019-08-30 10:49
阅读 988·2019-08-29 17:06
阅读 611·2019-08-29 16:15
阅读 905·2019-08-29 15:17
