一次开发可以节省10分钟的代码生成器-vue项目

760 阅读4分钟

初衷:为了减少ctrl+c、ctrl+v的操作,节省几分钟的时间去摸个鱼。(摸鱼其实就是看掘金学习各位大佬如何分享)

**想要生成怎样的代码?**生成如下图所示格式的文件和文件夹,还能动态改变文件里的内容

思考:带着这样的目的去翻找各种文档,发现从0搭建一个脚手架的思路比较适合我这个代码生成器。一般脚手架的搭建都是:

  1. 首先用户在控制台输入命令
  2. 采用一问一答的方式存储用户的条件
  3. 等待加载
  4. 执行完毕

在看各种资料的同时,找到了适合我的几种插件

  • 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 the npm link command was executed. (see [npm-config](https://www.npmjs.cn/misc/config) for the value of prefix). 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-installed package-name to node_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

通过以上这四个插件就可以完成我想要实现的功能了,接下来,根据模板文件生成动态的文件内容。

我们可以通过文件目录和文件分析出:

  1. api文件夹存储的是调用接口的地址信息
  2. ds文件夹存储的是数据信息
  3. router文件夹存储的是路由信息
  4. store文件夹存储的是状态信息
  5. view文件夹存储的是页面信息

我们需要根据功能生成相应的页面代码,此时创建5个模板比较合适。

新增一个模板文件template.js,我这里用的是ES6新特性``字符串模板,把输入的参数判断拼接成字符串返回。

新增文件生成逻辑

以上功能通过输入一个命令,完成了代码自动生成。如果页面里的有很多重复性但是可以通过条件判断代码。采用问答的方式,拿到所需的条件,动态的去生成代码能节省不少时间。

通过这次想偷懒的学习过程,学习到了很多知识。

拓展

大家动手的过程中,会通过不断的查资料来补充自己的不足,只有自己去写,加入自己的想法,这样学习到的东西才会对自己有帮助。