介紹
好久沒更新了，最近一直忙於業務開發，沒有多少時間學習自己的東西，抽着某天晚上的功夫寫了一個腳手架，其實就是一個簡單的node腳本。
我們知道，在小公司很少有時間有精力從0到1基於webpack去封裝一個類似於create-react-app、vue-cli、UmiJs之類的腳手架，更多的是我們基於上述的輪子二次封裝服務於我們實際業務的應用模板。
這樣做的話，我們可以依次封裝我們的業務模板，比如我自己在公司業務基礎上，封裝了三個業務模板，分別是：
- fast_h5_umi 基於
Typescript+React+Umi3.x+antd-mobile構建的通用H5模板。 - fast_h5_vue 基於
vue +vuex-cli3+vuex+vue-router+vant構建的通用H5模板。 - fast_react_native 基於
[email protected]+axios+Typescript開發的通用react-native模板
這樣做的話，以後我們有相應的項目都可以直接複製粘貼開始改起來，大大提高我們的開發效率
但是這樣的話我們還得去手動的去記錄每個項目的地址，這樣是很不方便的，這時候我們就想到是否可以搞一個類似於create-umi那樣的腳手架，全局安裝之後初始化項目，可以根據選項生成不同的內容。
開始
發現問題之後就要解決問題，在閱讀UmiJs的腳手架工具create-umi的源碼之後，可以看出其實就是利用npm的bin字段，向全局註冊一個命令，這個命令就可以使用。
比如如下代碼：
// package.json
{
"bin": {
"create-osdoc-app": "cli.js"
},
}
註冊了這樣一個命令，其中的create-osdoc-app就是全局需要使用的命令,對應的cli.js是本地的一個文件。我們可以在這個文件中相應的處理。
// cli.js
// 查看版本
if (args.v || args.version) {
console.log('version', chalk.blue(package.version));
if (existsSync(join(__dirname, '.debug'))) {
// 如果是本地調試會打印 @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);
}
// 取默認應用名
const name = args._[0] || '';
(async () => {
await runCli({
name,
args,
});
process.exit(0);
})();
通過簡單的校驗之後，我們會執行一個runCli方法，參數是我們執行命令的時候攜帶的參數
具體的runCli可以查看該文件 https://github.com/osdoc-dev/create-osdoc-app/blob/master/lib/run.js
使用
將腳手架推送至npm之後，我們就可以安裝並且使用它了。
全局安裝 create-osdoc-app
$ npm install create-osdoc-app -g
安裝後執行如下命令
$ yarn create-osdoc-app [appName]
$ create-osdoc-app
? 🍖 請輸入應用名稱 (new-app)?
new-app-demo
? 🌮 請選擇應用模板 (Use arrow keys)
> fast_h5_umi - 基於umi3.x+typescript+antd-mobile 構建h5模板
fast_h5_vue - vue +vue-cli3+vuex+vue-router+vant 快速開發 h5模板
fast_react_native - 基於 [email protected]+axios+typescript 開發的通用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
執行完相應的命令之後，我們會將模板clone至本地，我們就可以進行開發了。
後期我們還可以增加本地化的一些操作，比如現在是內置的一些模板，我們可以通過腳手架去下載指定的模板，或者通過腳手架幫助我們去創建一個組件之類的東西，這些都是可以的。
關於
總的來說主要就是通過node去幫助我們完成一些純人力的行爲，減少我們的工作量，加快開發效率
文章首發於自己的個人博客 實現create-osdoc-app腳手架