问题
- 什么是脚手架?什么是CLI?
- @vue/cli, create-react-app是如何实现的？
脚手架，CLI
- 脚手架是一类快速形成工程化目录的工具(业务类型)，如：yeoman, @vue/cli, create-react-app.
- CLI(command-line-interface, 缩写：CLI)(效率工具)， 如：webpack, es-lint, json-server
平常开发中经常会用到如上熟悉的脚手架，cli工具，那么这些工具，工具是如何实现的呢？原理是什么呢？
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"
},
嗯，里面有许多我们平常写项目也会经常用到的依赖，不过也有些我一点都不认识的，当对这些不熟悉的依赖中有几个典型的可以介绍一下，比如：execa，inquirer，vuepress。
- execa:是一个js操作shell的工具，是很好的子进程管理工具；
- inquirer: 是一个用户与命令行交互的工具，例如，我们在使用@vue/cli创建项目的时候，会有一些选择配置的交互，大概就是用这个实现的；
- vuepress: 适用于发布项目的技术文档，静态网页生成器
当然这些都不是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,稍后我们进去瞅瞅，看看用到的这些依赖，发现了一个commander, 具体的用处可以点开链接去看看。总而言之，就是node.js命令行接口的解决工具。最后，咱去看看vue.js,代码就不贴了，利用一系列的依赖来实现了用户与命令行的整个交互流程，还有一些复杂项目包管理配置操作，最终实现了脚手架快速创建项目的过程。
总结原理
后续会跟随学习，进一步更新学习的笔记，最终实现一个简易的脚手架工具。
