专栏首页前端加油站使用nodejs自动生成前端项目组件

使用nodejs自动生成前端项目组件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/74857527

脚本编写背景

写这个小脚本的初衷是,项目本身添加一个组件太繁琐了,比如我想要去建立一个login的组件,那么我需要手动去IDE中,创建index.js(组件出口文件),login.js(业务文件),login.html,login.less这四个文件。因为每个组件都有一些输出的代码,还要把之前组件的那几行拷贝过来,这种作业真的烦,于是乎写了一个小脚本去自动完成这些功能。

PS:本脚本运行环境是nodeV7以上,当前时间2017/07,stable版本还是V6,最新的node版本为V8.1.3(LTS版本),如要运行,请升级node版本为LTS版本。

预期效果

在命令行输入:node set login 在conponents文件夹下面自动生成4个文件,并填写index.js , login.js的文件公共内容。 如果输入多层文件如: node set login/foo 则会先检测conponents文件夹下是否存在login,如不存在,先创建login文件夹,然后创建foo的组件。本脚本主要使用nodejs的fs模块来完成需求。

fs模块

fs模块用于对系统文件及目录进行读写操作,本次主要用到的fs模块的功能有:

  1. fs.existsSync(path) 检测文件夹是否存在,一个同步的API,只接受一个路径参数,当前版本异步的废弃了。
  2. fs.mkdir(path,callback) 创建文件夹,异步,两个必填参数,路径和回掉。
  3. fs.readFileSync(path) 读取文件,接受一个参数,文件路径。
  4. 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/angularSeed

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ⭐Mapbox GL JS学习探索系列(3) - Layer

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    j_bleach
  • 从0到1打造一款react-native App(三)Camera

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • javaScript console用法

    谈到javaScript 的 console,通常能说的就是console.log/info/warning等等,比如,console.time(test){…...

    j_bleach
  • 如何构建用于垃圾分类的图像分类器

    当垃圾处理不当时,就会发生回收污染 - 比如回收带有油的披萨盒。或者当垃圾被正确处理但准备不当时 - 如回收未经冲洗的果酱罐。

    代码医生工作室
  • 手把手带你抓取智联招聘的“数据分析师”岗位!

    很多网友在后台跟我留言,是否可以分享一些爬虫相关的文章,我便提供了我以前写过的爬虫文章的链接(如下链接所示),大家如果感兴趣的话也可以去看一看哦。在本文中,我将...

    1480
  • 基于android studio的layout的xml文件的创建方式

    1.第一步在android studio的project视图模式下右击res文件夹

    砸漏
  • React VS Vue:2020年应该选哪个?[每日前端夜话0xD3]

    Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。2020 年将会是为你的 Web 项目选择正确的 javas...

    疯狂的技术宅
  • 业界 | iPhone上也能运行AI模型,瞧瞧别人家的程序员是怎么用Core ML的

    第一台iPhone发布于2007年,而机器学习这一概念更是在第一台iPhone发布的十年前就已经出现。但这两者碰撞出火花,则是在最近几年才出现的事情。

    大数据文摘
  • Python学习之进程和并发

    从Python2.4 以后,subprocess模块负责衍生出新的进程,和标准输入,标准输出,标准错误输出交互,并监听返回值。Subprocess模块是用来取代...

    py3study
  • 【iOS】浅析近期越狱工具+“平刷”工具

    越狱工具:unc0ver,chimera,checkra1n(chimera1n)

    zby1101

扫码关注云+社区

领取腾讯云代金券