全国咨询热线:18720358503

如何编辑微信小程序_使用node.js完成主动生成前端

类别:行业新闻 发布时间:2021-01-11 浏览人次:

利用node.js实现自动生成前端项目组件的方法详解       最近在学习用,基于nodejs的强大,我从原本的只写前端变成了写全栈。下面这篇文章主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。

本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

脚本编写背景


<,login.less这四个文件。因为每个组件都有一些输出的代码,还要把之前组件的那几行拷贝过来,这种作业真的烦,于是乎写了一个小脚本去自动完成这些功能。

凡科抠图:本脚本运行环境是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模块的功能有:

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等结构,这些都是比较公用的,把他们写在模板当中,然后读取出来,替换其中的关键词,如时间,组件名等。

生成文件并写入内容

提前建立好要生成的文件和要读取的文件。如:

`, `${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中去注入,这些都可以用脚本完成,本文就到这里为止了。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。


下一篇:没有了

推荐阅读

如何编辑微信小程序_使用node.js完成主动生成前端

运用node.js完成全自动转化成前端开发新项目部件的方式详细说明 近期在学习培训用,根据nodejs的强劲,我在本来的只写前端开发变为了写全栈。下边本文关键给大伙儿详细介绍了...

2021-01-11
基本版微信小程序_js学习心得

js学习培训感受_一个简易的动漫库封裝tween.js 文章投稿:jingxian 下边网编就为大伙儿产生一篇js学习培训感受_一个简易的动漫库封裝tween.js。网编感觉挺好的,如今就共享给大伙儿...

2021-01-11
怎么设定网页的尺寸

网站是公司在互连在网上的店面,是客户掌握公司的关键方式,第一印像太重要,因此一个出色的网站就看起来太重要了,一个网页页面制作在设计方案之初就需要定义出网页页面的规...

2021-01-11
开发一个小程序多少钱_Vue.js完成输入框绑定的实

Vue.js完成键入框关联的案例编码 本文关键详细介绍了Vue.js完成键入框关联的案例编码,必须的朋友能够参照下完成实际效果以下:完成编码及注解!DOCTYPE html html head title vue.js数据信...

2021-01-11
【资讯】农村互联网是中国未来十年的黄金创业

【新闻资讯】乡村互连网是我国将来十年的金子自主创业机遇 :00 访问数: 富华网北京市三月七日电 全国性人民代表、小米手机高新科技创办人、执行董事长兼顶尖实行官小米雷军...

2021-01-11
价值的特殊形态:信息

一切商品和服务都包括一定的信息内容,关键包含商品(服务)所蕴涵的专业知识,商品(服务)使用价值展现给消费者的可认知方式,及其做为认知能力正确引导标示的标记等。不一样的商品...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信