問題
- 什么是腳手架?什么是CLI?
- @vue/cli, create-react-app是如何實現(xiàn)的？
腳手架，CLI
- 腳手架是一類快速形成工程化目錄的工具(業(yè)務(wù)類型)，如：yeoman, @vue/cli, create-react-app.
- CLI(command-line-interface, 縮寫：CLI)(效率工具)， 如：webpack, es-lint, json-server
平常開發(fā)中經(jīng)常會用到如上熟悉的腳手架，cli工具，那么這些工具，工具是如何實現(xiàn)的呢？原理是什么呢？
git源碼瀏覽
話不多說，按照咱們的想法，先去github，vue/cli的工程上，瞅一瞅源碼。對著package.json一陣觀看:
"devDependencies": {
"@babel/core": "^7.9.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^5.0.2",
"@vuepress/plugin-pwa": "^1.4.0",
"@vuepress/theme-vue": "^1.4.0",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^24.9.0",
"chromedriver": "^80.0.1",
"debug": "^4.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-graphql": "^3.1.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"eslint-plugin-vue-libs": "^4.0.0",
"execa": "^1.0.0",
"geckodriver": "^1.19.1",
"globby": "^9.2.0",
"graphql": "^14.6.0",
"http-server": "^0.12.1",
"inquirer": "^7.1.0",
"jest": "^24.9.0",
"lerna": "^3.19.0",
"lerna-changelog": "^0.8.3",
"lint-staged": "^9.5.0",
"memfs": "^3.1.2",
"minimist": "^1.2.5",
"prettier": ">= 1.13.0",
"request": "^2.88.2",
"request-promise-native": "^1.0.8",
"rimraf": "^3.0.2",
"semver": "^6.1.0",
"typescript": "~3.8.3",
"vuepress": "^1.3.0",
"webpack": "^4.0.0",
"yorkie": "^2.0.0"
},
嗯，里面有許多我們平常寫項目也會經(jīng)常用到的依賴，不過也有些我一點都不認識的，當(dāng)對這些不熟悉的依賴中有幾個典型的可以介紹一下，比如：execa，inquirer，vuepress。
- execa:是一個js操作shell的工具，是很好的子進程管理工具；
- inquirer: 是一個用戶與命令行交互的工具，例如，我們在使用@vue/cli創(chuàng)建項目的時候，會有一些選擇配置的交互，大概就是用這個實現(xiàn)的；
- vuepress: 適用于發(fā)布項目的技術(shù)文檔，靜態(tài)網(wǎng)頁生成器
當(dāng)然這些都不是vue/cli整個項目的部分依賴，我們再去找找，項目的入口文件，我們點到項目的packages目錄中，會看到一堆目錄，找到我們的cli文件夾，點進去，看看package.json瞅瞅；
{
"name": "@vue/cli",
"version": "4.3.1",
"description": "Command line interface for rapid Vue.js development",
"bin": {
"vue": "bin/vue.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/vue-cli.git",
"directory": "packages/@vue/cli"
},
"keywords": [
"vue",
"cli"
],
"author": "Evan You",
"license": "MIT",
"bugs": {
"url": "https://github.com/vuejs/vue-cli/issues"
},
"homepage": "https://cli.vuejs.org/",
"publishConfig": {
"access": "public"
},
"dependencies": {
"@vue/cli-shared-utils": "^4.3.1",
"@vue/cli-ui": "^4.3.1",
"@vue/cli-ui-addon-webpack": "^4.3.1",
"@vue/cli-ui-addon-widgets": "^4.3.1",
"boxen": "^4.1.0",
"cmd-shim": "^3.0.3",
"commander": "^2.20.0",
"debug": "^4.1.0",
"deepmerge": "^4.2.2",
"download-git-repo": "^3.0.2",
"ejs": "^2.7.1",
"envinfo": "^7.5.0",
"fs-extra": "^7.0.1",
"globby": "^9.2.0",
"import-global": "^0.1.0",
"inquirer": "^7.1.0",
"isbinaryfile": "^4.0.5",
"javascript-stringify": "^1.6.0",
"js-yaml": "^3.13.1",
"jscodeshift": "^0.7.0",
"leven": "^3.1.0",
"lodash.clonedeep": "^4.5.0",
"lru-cache": "^5.1.1",
"minimist": "^1.2.5",
"recast": "^0.18.8",
"resolve": "^1.15.1",
"shortid": "^2.2.15",
"slash": "^3.0.0",
"validate-npm-package-name": "^3.0.0",
"vue": "^2.6.11",
"vue-jscodeshift-adapter": "^2.0.2",
"yaml-front-matter": "^3.4.1"
},
"engines": {
"node": ">=8.9"
}
}
可以看到項目的入口文件是bin目錄下的vue.js,稍后我們進去瞅瞅，看看用到的這些依賴，發(fā)現(xiàn)了一個commander, 具體的用處可以點開鏈接去看看?？偠灾?，就是node.js命令行接口的解決工具。最后，咱去看看vue.js,代碼就不貼了，利用一系列的依賴來實現(xiàn)了用戶與命令行的整個交互流程，還有一些復(fù)雜項目包管理配置操作，最終實現(xiàn)了腳手架快速創(chuàng)建項目的過程。
總結(jié)原理
后續(xù)會跟隨學(xué)習(xí)，進一步更新學(xué)習(xí)的筆記，最終實現(xiàn)一個簡易的腳手架工具。
