五分钟开发属于你本身的代码生成器

本文很短，却诚意满满
用不了2分钟你就能看完
而后大几率你就会惊叹
原来开发属于本身的代码生成器，是这么滴简单

舒适提示：本文是《新生代小鲜肉之代码生成器》的延续篇，若是你还不知道 ncgen 这个小鲜肉，那最好先去 Look 一 Look 《新生代小鲜肉之代码生成器》

---

丹尼尔：蛋兄，上次别后，按照你教个人那一套方法，我几分钟就配置了一个彻底知足我需求的代码生成器，真是强大又不失简单啊

蛋先生：说干就干，你的动手能力让我佩服

丹尼尔：见笑见笑。不过我今天又带着问题而来

蛋先生：恭候多时

丹尼尔：我把 ncgen-config.js 挂在了云端，而后个人小伙伴们抱怨使用的时候命令太长记不住：

$ ncgen https://raw.githubusercontent.com/daniel-dx/vue3-ncgen-demo/master/ncgen-config.js

你看，是否是有点长？蛋兄有什么好建议吗？

蛋先生：固然，ncgen 早已为此准备了一个很是迷人的方案

丹尼尔：什么迷人的方案？有多迷人？快告诉我快告诉我

蛋先生：那就是 - 经过 ncgen 快速开发属于你本身的代码生成器

丹尼尔：Wo~，属于我本身的，听着就爽歪歪，昨弄呢？昨弄呢？

---

蛋先生：假设咱们如今要开发一个代码生成器，就叫 vue-ncgen-demo-cli 吧，你猜几步搞定？

丹尼尔：我猜啊，就一步。

蛋先生：这，有点过度了，臣妾作不到，再见

丹尼尔：玩笑玩笑，蛋兄就直说吧

蛋先生：那就三步曲走起

• 第一步：生成代码生成器项目

$ yarn create @ncgen/app # npm init @ncgen/app

• 第二步：编写代码生成器逻辑

在生成的项目中找到 ncgen-config.js ，根据你代码生成器的逻辑，修改这个配置文件

示例配置在这里： https://github.com/daniel-dx/...

这里推荐一个小技巧，在须要增长子命令时，除了复制粘贴，其实你是能够更优雅地经过子命令的方式来完成的

cd vue-ncgen-demo-cli
$ yarn create @ncgen/app add-sub # # npm init @ncgen/app add-sub

• 第三步：对全世界发布

$ npm run release

---

丹尼尔：完了？

蛋先生：是的，完了，就是这么简单

丹尼尔：那个人小伙伴们该如何使用这个代码生成器呢？

蛋先生：灰常简单，示例走起

# 安装
$ npm i vue-ncgen-demo-cli -g

# 执行主命令生成脚手架项目
$ vue-ncgen-demo-cli

# 执行子命令插入代码
$ vue-ncgen-demo-cli add-component

丹尼尔：完美，我火烧眉毛地想要去开发属于我本身的代码生成器了

蛋先生：期待你的反馈

---

nggen github: https://github.com/daniel-dx/... 【请加个Star呗】

ncgen 文档：https://daniel-dx.github.io/n...

关键字：ncgen, scaffolding, generator, 代码生成器, 脚手架