介紹
好久沒更新了拒贱，最近一直忙于業(yè)務(wù)開發(fā)宛徊，沒有多少時間學(xué)習(xí)自己的東西，抽著某天晚上的功夫?qū)懥艘粋€腳手架柜思，其實就是一個簡單的node腳本岩调。
我們知道，在小公司很少有時間有精力從0到1基于webpack去封裝一個類似于create-react-app赡盘、vue-cli号枕、UmiJs之類的腳手架，更多的是我們基于上述的輪子二次封裝服務(wù)于我們實際業(yè)務(wù)的應(yīng)用模板陨享。
這樣做的話葱淳，我們可以依次封裝我們的業(yè)務(wù)模板，比如我自己在公司業(yè)務(wù)基礎(chǔ)上抛姑，封裝了三個業(yè)務(wù)模板赞厕，分別是：
-
fast_h5_umi 基于
Typescript+React+Umi3.x+antd-mobile構(gòu)建的通用H5模板。 -
fast_h5_vue 基于
vue +vuex-cli3+vuex+vue-router+vant構(gòu)建的通用H5模板定硝。 -
fast_react_native 基于
react-native+dvajs+antd-mobile-rn+react-navigation@5.x+axios+Typescript開發(fā)的通用react-native模板
這樣做的話皿桑，以后我們有相應(yīng)的項目都可以直接復(fù)制粘貼開始改起來，大大提高我們的開發(fā)效率
但是這樣的話我們還得去手動的去記錄每個項目的地址，這樣是很不方便的诲侮，這時候我們就想到是否可以搞一個類似于create-umi那樣的腳手架镀虐，全局安裝之后初始化項目，可以根據(jù)選項生成不同的內(nèi)容沟绪。
開始
發(fā)現(xiàn)問題之后就要解決問題刮便，在閱讀UmiJs的腳手架工具create-umi的源碼之后，可以看出其實就是利用npm的bin字段绽慈，向全局注冊一個命令恨旱，這個命令就可以使用。
比如如下代碼：
// package.json
{
"bin": {
"create-osdoc-app": "cli.js"
},
}
注冊了這樣一個命令坝疼，其中的create-osdoc-app就是全局需要使用的命令,對應(yīng)的cli.js是本地的一個文件搜贤。我們可以在這個文件中相應(yīng)的處理。
// cli.js
// 查看版本
if (args.v || args.version) {
console.log('version', chalk.blue(package.version));
if (existsSync(join(__dirname, '.debug'))) {
// 如果是本地調(diào)試會打印 @debug
console.log(chalk.cyan('@debug'));
}
process.exit(0);
}
if (!semver.satisfies(process.version, '>= 8.0.0')) {
console.error(chalk.red('? The generator will only work with Node v8.0.0 and up!'));
process.exit(1);
}
// 取默認(rèn)應(yīng)用名
const name = args._[0] || '';
(async () => {
await runCli({
name,
args,
});
process.exit(0);
})();
通過簡單的校驗之后裙士，我們會執(zhí)行一個runCli方法入客，參數(shù)是我們執(zhí)行命令的時候攜帶的參數(shù)
具體的runCli可以查看該文件 https://github.com/osdoc-dev/create-osdoc-app/blob/master/lib/run.js
使用
將腳手架推送至npm之后，我們就可以安裝并且使用它了腿椎。
全局安裝 create-osdoc-app
$ npm install create-osdoc-app -g
安裝后執(zhí)行如下命令
$ yarn create-osdoc-app [appName]
$ create-osdoc-app
? ?? 請輸入應(yīng)用名稱 (new-app)?
new-app-demo
? ?? 請選擇應(yīng)用模板 (Use arrow keys)
> fast_h5_umi - 基于umi3.x+typescript+antd-mobile 構(gòu)建h5模板
fast_h5_vue - vue +vue-cli3+vuex+vue-router+vant 快速開發(fā) h5模板
fast_react_native - 基于 react-native+dvajs+antd-mobile-rn+react-navigation@5.x+axios+typescript 開發(fā)的通用react-native
Cloning into 'new-app'...
remote: Enumerating objects: 123, done.
remote: Counting objects: 100% (123/123), done.
remote: Compressing objects: 100% (111/111), done.
Receiving objects: 22% (28/123),
Receiving objects: 100% (123/123), 99.90 KiB | 7.00 KiB/s, done.
Resolving deltas: 100% (4/4), done.
> ?? clone success
?? Copied to clipboard, just use Ctrl+V
? File Generate Done
執(zhí)行完相應(yīng)的命令之后桌硫，我們會將模板clone至本地，我們就可以進(jìn)行開發(fā)了啃炸。
后期我們還可以增加本地化的一些操作铆隘，比如現(xiàn)在是內(nèi)置的一些模板，我們可以通過腳手架去下載指定的模板南用，或者通過腳手架幫助我們?nèi)?chuàng)建一個組件之類的東西膀钠，這些都是可以的。
關(guān)于
總的來說主要就是通過node去幫助我們完成一些純?nèi)肆Φ男袨楣妫瑴p少我們的工作量肿嘲，加快開發(fā)效率
文章首發(fā)于自己的個人博客 實現(xiàn)create-osdoc-app腳手架
