相信小伙伴们如果学过Vue、React肯定使用过脚手架
比如Vue的vue-cli、React的create-react-app
但你知道他们的原理吗?
前端脚手架核心原理
其实也没多复杂哈,其实就这就几步~
- 注册主命令
- 使用node运行
- 注册参数命令事件
注册主命令
什么是主命令?
比如 vue create app
vue 就是主命令,create 是子命令,app 就是option参数(这里指项目名称)
怎么实现?
- 初始化项目
其实就是创建个文件夹,切到目录npm init -y
初始一下,完事~
(因为我叫阿远,我直接ayuan,嘻嘻~)
mkdir ayuan-cli
cd ayuan-cli
npm init -y
- 创建index.js文件 在项目中创建index.js,然后随便加一句话
console.log('hello~')
- 修改package.json
重点来了哈,在package.json中加上这句话
"bin": {
"ayuan": "index.js"
}
再切到命令行,输入
npm link
其实就是把项目直接安装到本地,不需要发布到npm,再安装,非常的好用哈!
这就完成命令注册!
不信,你试试!
提示一定是从
command not found: ayuan
到
syntax error near unexpected token `'hello~''
(我都替你测好几次了!)
使用node运行
好了,出现上述的提示,其实就是咱们系统不知道他要用什么环境运行
怎么告诉他?在index.js的第一行,一定是第一行哈,加下面一句话
#!/usr/bin/env node
像这样!
你再切到命令行,输入ayuan
,或者你用bin的注册的命令,一定会输出hello~
如果不行,那就是你上述步骤做错了!(哎,我不管)
注册参数命令事件
注册参数命令事件,这其实可拆两步解析参数
和注册参数事件
- 解析参数 好,先说第一步,解析参数
比如,我们知道 vue-cli, 创建项目命令是vue create project
其实可以认为create
和project
都是参数
怎么获取?可以使用process.argv
我可以在这贴下文档(不然说我胡说八道)
这样我们不就直接用process.argv.slice(2)
就可获取参数了,注意是数组
- 注册参数事件
当然得使用commander
库(vue-cli、create-react-app也在用哦)
可以贴下 vue-cli源码
npm install commander -S
安装完,快速coding
// 引入 Command
const { Command } = require('commander')
const program = new Command()
// 获取 package.json 版本
const version = require('./package.json').version
program.version(version) // 注册版本
.usage('<command> [options]') // 使用命令格式
program.parse(process.argv); // 解析参数,一定放最后
这时候,就可以输入
ayuan --version
看看有无版本号输出,有得话说明commander使用成功
接下就是注册命令
program.command('init <name>')
.option('-d, --default', '默认配置', false) // 第一是想要注册参数, 第二是参数是描述, 第三是默认值
.action((name, options) => {
console.log(name)
console.log(options)
})
这行代码一定要放在
不然代码不会生效哈!
我们使用ayuan init test
和 ayuan init test -d
就会很轻松看到
和
好了,以上就是核心原理~
确实就酱~接下来是命令做一些的事情,包括询问用户配置、生成模板
感谢阅读~
补充:
小伙伴可能不知道怎么找vue-cli或者create-react-app的源码
拿vue-cli做例子
直接在命令行下输入 which vue
,找到文件路径
发现在一个文件bin目录下,切到目录 输入 ls -l
,找到vue真实文件
其实就是上一级目录中lib文件下的node_modules
而入口文件就是这个vue.js
就酱~