五分鐘開發屬於你本身的代碼生成器

本文很短，卻誠意滿滿
用不了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, 代碼生成器, 腳手架