新生代小鲜肉之代码生成器
如果你能耐心看完这个对话,
也许你会想动动手配置一个代码生成器,
这样你的撸码生活可能从此就会有所变化,变得愈发轻松。
从一个脚手架说起
丹尼尔: 最近要搞个代码生成器,能够快速生成项目代码那种,蛋兄有什么推荐?
蛋先生: 过往一直使用 yeoman,快超 10k star 的开源项目。但是,今天要推荐给你的,并非 yeoman,而是一个新生代的小鲜肉 ncgen
,它可能显得更加的平易近人。
丹尼尔: 我最最喜欢简单的了,这个咋用呢?
蛋先生: 老规矩,你说你的需求,我试着一一解答
首先,你需要一个项目模板
丹尼尔: 我有一个项目模板(比如:vue3-ncgen-demo),我希望新建的项目都来自于这个项目模板,这样我只需专心维护好这个项目模板即可。
蛋先生: OK,这就是项目脚手架的功能了。我们来看下 ncgen
是如何处理的。
第一步 安装 ncgen
$ npm i ncgen -g # yarn global add ncgen
第二步 生成配置文件 ncgen-config.js
,该配置文件描述了代码生成器的逻辑
$ ncgen genConf
第三步 修改 ncgen-config.js
中的 main.tmplSource
为项目模板的地址。
export default {main: {tmplSource: "https://github.com/daniel-dx/vue3-ncgen-demo.git",},
};
运行一下试试:
ncgen ncgen-config.js
简单复制还不行,小修小改是常态
丹尼尔: 哎呦不错哦。不过目前生成的项目跟项目模板是一模一样的,但它总会有属于自己的跟项目模板不一些的信息,比如项目名称,作者姓名等。这些我可不希望每次生成完项目还要手工修改哦。
蛋先生: OK,要求非常合理。由于这些信息是创建项目的人才能提供,所以我们需要通过一些问题来收集这些信息,然后就可以根据这些信息对生成的项目作一些修改。我们修改下 ncgen-config.js
中的 main.prompt
和 main.updateFiles
示例说明:
对生成项目中的package.json
文件进行字符串替换,规则如下:
将vue3-ncgen-demo
字符串替换成用户录入的项目名称
将Daniel.xiao
字符串替换成用户录入的作者名称
export default {main: {prompt: [{type: "input",name: "author",message: "What is the author's name",},],...updateFiles: {"package.json": function (content, options) {const answers = this.$answersreturn api.replace(content, {"vue3-ncgen-demo": answers.projectNameObj.kebabCase,"Daniel.xiao": answers.author,});},},}
};
丹尼尔: 咦,我注意到这里并没使用模板引擎,而是直接使用字符串替换
蛋先生: 是的,这个设计有很大的意义。用了模板引擎来替换文件,可能会导致项目模板自身无法正常运行,因为模板引擎需要占位符,而占位符可能会导致代码解析错误
丹尼尔: 也是,这样一来项目模板就是一个普通的项目而已,也不用特意去做一些模板占位符的改造
多余的文件昨办?请删除
丹尼尔: 那我继续。我的项目模板里面放了一些模板目录和文件(比如模块模板目录,组件模板文件),但我不想在生成的项目里面看到这些模板的东西。
蛋先生: OK,没问题,就是需要删除指定的文件和目录。我们修改下 ncgen-config.js
中的 main.removeFiles
。
示例说明:
删除生成项目中的ncgen-config.js
和src/components/base/Template.vue
文件
export default {main: {removeFiles: ["ncgen-config.js", "src/components/base/Template.vue"],},
};
一条龙服务:自动安装依赖
丹尼尔: 我刚刚有注意到,上面的例子在运行的时候会自动安装依赖,应该是用 npm
安装的吧,这个能支持 yarn
吗?如果我是非 NodeJS 项目,比如 Python,Go 等,也能做到吗?
蛋先生: 嗯,没错,生成的 ncgen-config.js
默认是使用 npm i
来安装依赖,看下边的示例。如果你想换成 yarn
,只需把 command
改成 yarn install
。而如果是 Python,Go 等其它语言,也只需将 command
改成对应的依赖安装命令即可
export default {main: {installDependencies: {skip: false,tips: "Dependencies are being installed, it may take a few minutes",command: "npm i",},},
};
最后,给点友好的提示
丹尼尔: 太棒了,项目脚手架就这么配几下就完成了,我想最后需要来个友好的欢迎和漂亮的 ending
蛋先生: 如你所愿,简单修改下 main.welcome
和 main.complete
即可
export default {main: {welcome: "Welcome to use (Vue 3 + TypeScript + Vite) project generator",...complete: "Congratulations, the operation is successful",},
};
高频使用的并非脚手架
丹尼尔: 脚手架是搞定了,但它只在新建项目时才使用,高频操作还是部分代码的增加,比如加一个功能模块,加一个组件,加一个 API 之类的
蛋先生: 我理解你的意思。老规矩,你问我答
代码模板存在于项目模板中
丹尼尔: 我现在要在一个项目中新加一个组件,我并不希望复制一个已有组件,然后进行各种修改删除代码的操作。事实上项目模板中有组件的代码模板
蛋先生: OK。我们先在 ncgen-config.js
中增加一个叫 add-component
的子命令。
示例说明(假设 category 和 name 的值分别为 ‘busi’ 和 ‘demo’):
description
用于描述子命令的功能。
api.listDirs
这个API,在让用户选择将代码插入到哪个位置时非常有用。
addFilesTo
的配置会将项目模板中的 src/components/base/Template.vue 插入到项目中的 src/components/busi/Demo.vue 文件。
export default {sub: {"add-component": {description: "Add vue component",prompt: [{type: "list",choices: function () {return api.listDirs("src/components/");},name: "category",message: "Please select the category",},{type: "input",name: "name",message: "What is the component name",validate(input) {if (!input) return "The component name is required";return true;},},],tmplSource: "https://github.com/daniel-dx/vue3-ncgen-demo.git",addFilesTo: function () {const answers = this.$answers;return {"src/components/base/Template.vue": `src/components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.vue`,};},},},
};
代码模板不存在于项目模板中
丹尼尔: 漂亮。不过对于已经存在的项目,这些项目并非来自项目模板,而我也想加一些子命令来为项目生成部分代码,昨整?
蛋先生: 子命令支持两种添加文件的方式,一种就是上面提到的来自于项目模板的代码模板,还有一种就是你动态创建。两者可同时使用。以下示例演示如何动态创建代码文件
示例说明(假设 category 和 name 的值分别为 ‘busi’ 和 ‘demo’):
addFiles
的配置会在项目中创建 src/components/busi/Demo.md 文件,这个文件的内容为# Demo
export default {sub: {"add-component": {addFiles: function () {const answers = this.$answers;return {[`src/components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.md`]: function () {return `# ${answers.nameObj.upperFirstCamelCase}`;},};},},},
};
墙裂推荐的替换技巧
丹尼尔: 接着,又是进行一些文件内容的修改(比如增加了页面,会自动修改路由规则文件为页面注册路由),跟主命令一样的操作是吧。
蛋先生: 悟性很高嘛。这里推荐一个小技巧,就是在需要插入片段代码的地方加入一些标识注释,如 src/App.vue 代码所示:
<template><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /><!-- Don't touch me - place component -->
</template><script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/busi/HelloWorld.vue'
// <!-- Don't touch me - import component -->
export default defineComponent({name: 'App',components: {HelloWorld,// <!-- Don't touch me - register component -->}
})
</script>
再配合 api.insertBefore
这个API在文件的指定匹配位置前插入指定的内容
export default {sub: {updateFiles: function () {const answers = this.$answers;return {"src/App.vue": function (content, options) {return api.insertBefore(content, {"// <!-- Don't touch me - import component -->": `import ${answers.nameObj.upperFirstCamelCase} from './components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.vue'`,"// <!-- Don't touch me - register component -->": `${answers.nameObj.upperFirstCamelCase},`,"<!-- Don't touch me - place component -->": `<${answers.nameObj.upperFirstCamelCase}/>`,});},[`src/components/${answers.category}/${answers.nameObj.upperFirstCamelCase}.vue`]: function (content,options) {return api.replace(content, {Template: `${answers.nameObj.upperFirstCamelCase}`,});},};},},
};
丹尼尔: 完美。谢了蛋兄,我感觉我已经打道任督二脉,跃跃欲试我的第一个代码生成器了
蛋先生:不谢,期待你的反馈
写在最后
以上 - 完整配置
例子中 ncgen-config.js
的完整配置请查看:ncgen-config.js
以下 - ncgen官网
https://daniel-dx.github.io/ncgen/
关键字:ncgen, scaffolding, generator, 代码生成器, 脚手架
新生代小鲜肉之代码生成器相关推荐
- 将代码生成器带入TVM
将代码生成器带入TVM 为了使数据科学家不必担心开发新模型时的性能,硬件后端提供程序(例如Intel,NVIDIA,ARM等)可以提供诸如cuBLAS或cuDNN之类的内核库以及许多常用的深度学习内核 ...
- 代码生成器项目正式启动
SVN地址是: svn://www.oksvn.com/CodeAssistant J2EE的项目开发工作本身充斥着各种重复,各种复制,各种粘贴,所以,才会出现了Spring和Struts2这些优秀的 ...
- jeecgboot前端开发_一款基于代码生成器的Java快速开发平台【jeecg-boot】
原标题:一款基于代码生成器的Java快速开发平台[jeecg-boot] 今天给大家介绍一个后台脚手架框架:jeecg-boot 来看看官方怎么介绍的. 一款基于代码生成器的Java快速开发平台!全新 ...
- python 自动生成C++代码 (代码生成器)
python 代码自动生成的方法 (代码生成器) 遇到的问题 工作中遇到这么一个事,需要写很多C++的底层数据库类,但这些类大同小异,无非是增删改查,如果人工来写代码,既费力又容易出错:而借用pyth ...
- MyBatis复习笔记5:MyBatis代码生成器
前言:做过几个项目之后深感代码生成器的便捷,有了它我们可以少写许多重复的.基础的代码,如基本的增删改查的代码,我们可以交给代码生成器生成,而我们只需要专注于业务逻辑上的代码即可. MyBatis Ge ...
- 代码生成器前戏 之 数据库元数据
总结:代码生成器大致有两种方式,1.根据po 生成 表 结构 等系列类,如 Hibernate自动生成 2.根据表生成 po 等系列类.其实实际 开发时候 多半还是 先设计好表,然后生成 的情况多. ...
- [NHibernate]代码生成器的使用
目录 写在前面 文档与系列文章 代码生成器的使用 总结 写在前面 前面的文章介绍了nhibernate的相关知识,都是自己手敲的代码,有时候显得特别的麻烦,比如你必须编写持久化类,映射文件等等,举得例 ...
- 动软代码生成器教程——懒人有福了
很多时候项目必须是三层架构模式,但是很多繁琐的代码让多数程序员闹心--那有没有一个省时省力的工具快速的帮我们搞定三层架构呢?回答是肯定的,很早之前技术牛人李天平就开发出了这么一款工具,目前该工具还在不 ...
- 在线直播 | 是事实还是贩卖焦虑?IT行业也偏爱“小鲜肉”
几年前曾看过这样一篇报道:Java 之父求职被嫌年纪大,硅谷公司现在喜欢"小鲜肉",不爱"老古董".Java之父 James Gosling 在 Faceboo ...
最新文章
- asp开发中存储过程应用全接触 _asp技巧
- 重磅综述:三万字长文读懂单细胞RNA测序分析的最佳实践教程 (原理、代码和评述)
- 百度SEO站长统计后台广告推送引流软件
- 设计模式学习笔记——原型(Prototype)框架
- axios学习笔记(一):学习HTTP相关的技术知识点
- 数据结构与算法--递归(Recursion Algorithm)
- confirm修改按钮文字_条码设计软件如何调整条形码与条码文字之间的距离
- mysql并发死锁问题解决
- Java DatagramPacket 中的坑
- python的优点有哪些-python语言有什么优势
- VirtualBox安装虚拟机后分辨率调不对怎么办
- bootbox 使用方式
- 通过CSS美化Web页面
- ETCD数据库源码分析——etcdserver bootstrap初始化存储
- 华为鸿蒙系统界面清新,华为鸿蒙系统:全新UI界面
- 实践篇·让你的图片特别起来—自定义像素化
- 手机端搜狗输入法语音转文字的体验报告
- 实战大项目:模拟登录丁香园,并抓取论坛页面所有的人员基本信息与回复帖子内容----爬取第二步
- 我犯的错和解决AnimationEvent 'NewEvent' has no receiver! Are you missing a component
- 文件上传漏洞靶场upload-labs学习(pass11-pass15)