初衷:为了减少ctrl+c、ctrl+v的操作,节省几分钟的时间去摸个鱼。(摸鱼其实就是看掘金学习各位大佬如何分享)
**想要生成怎样的代码?**生成如下图所示格式的文件和文件夹,还能动态改变文件里的内容
思考:带着这样的目的去翻找各种文档,发现从0搭建一个脚手架的思路比较适合我这个代码生成器。一般脚手架的搭建都是:
- 首先用户在控制台输入命令
- 采用一问一答的方式存储用户的条件
- 等待加载
- 执行完毕
在看各种资料的同时,找到了适合我的几种插件
-
chalk颜色处理器(给控制台输出的文字加上喜欢的颜色)
-
inquirer命令行交互工具(提出问题保存答案)
-
fs-extra文件处理(可以使用fs,不需要安装)
-
ora进度美化(程序执行时美化加载样式)
完成自己的代码生成器后,并不满足于此,还想着以后有机会搭建属于自己项目的脚手架,多多储存知识。常用到的插件也列举一下
-
**commander**命令行处理(能够定义各种命令,执行不同的命令处理)
-
**download-git-repo**下载文件(根据地址下载文件)
-
**cross-spawn**跨平台执行命令(下载各种插件)
************************ 准备敲敲敲代码 **************************
准备一个空文件夹:auto-generate-code
执行npm init得到package.json文件
新增一个文件夹和文件 bin index.js
在控制台执行node bin/index.js看可以输出什么?
怎样全局使用一个命令就可以执行这个node bin/index.js指令。
在package.json文件新增"bin": {"agc": "bin/index.js"},(键值对)(偷学来的😊)
执行agc,发现找不到这个命令,需要先npm link
Package linking is a two-step process.
First,
npm link
in a package folder will create a symlink in the global folder{prefix}/lib/node_modules/<package>
that links to the package where thenpm link
command was executed. (see[npm-config](https://www.npmjs.cn/misc/config)
for the value ofprefix
). It will also link any bins in the package to{prefix}/bin/{name}
.Next, in some other location,
npm link package-name
will create a symbolic link from globally-installedpackage-name
tonode_modules/
of the current folder.
上面👆完成了一个在本地项目直接输入指令:agc,完成node bin/index.js命令(也只有自己偷懒用用),如需让大家都可以使用,可以放在npm上。
干货代码
安装插件 npm install chalk inquirer fs-extra ora --save
- 一问一答
用到inquirer插件
写好执行一下
如需了解inquirer提供了哪些配置,请戳这儿 👉 inquirer
- 颜色处理
用到chalk插件
执行
如需了解chalk提供了哪些配置,请戳这儿 👉 chalk
- 生成文件和文件夹
用到fs/fs-extra插件
执行一下,在code下生成aa文件夹,按照这个思路依次生成xxx/api、xxx/ds、xxx/router、xxx/store、xxx/views
如需了解fs-extra提供了哪些配置,请戳这儿 👉 fs-extra
- 美化加载效果
用到ora
看一下效果
如需了解ora提供了哪些配置,请戳这儿 👉 ora
通过以上这四个插件就可以完成我想要实现的功能了,接下来,根据模板文件生成动态的文件内容。
我们可以通过文件目录和文件分析出:
- api文件夹存储的是调用接口的地址信息
- ds文件夹存储的是数据信息
- router文件夹存储的是路由信息
- store文件夹存储的是状态信息
- view文件夹存储的是页面信息
我们需要根据功能生成相应的页面代码,此时创建5个模板比较合适。
新增一个模板文件template.js,我这里用的是ES6新特性``字符串模板,把输入的参数判断拼接成字符串返回。
新增文件生成逻辑
以上功能通过输入一个命令,完成了代码自动生成。如果页面里的有很多重复性但是可以通过条件判断代码。采用问答的方式,拿到所需的条件,动态的去生成代码能节省不少时间。
通过这次想偷懒的学习过程,学习到了很多知识。
拓展
大家动手的过程中,会通过不断的查资料来补充自己的不足,只有自己去写,加入自己的想法,这样学习到的东西才会对自己有帮助。