前端脚手架核心原理

1,202 阅读3分钟

相信小伙伴们如果学过Vue、React肯定使用过脚手架

比如Vue的vue-cli、React的create-react-app

但你知道他们的原理吗?

47C005AF597380B905F2436C2A7C31DC.jpg

前端脚手架核心原理

其实也没多复杂哈,其实就这就几步~

2AC1EF5788946FF4732AE93557A3A229.jpg

  • 注册主命令
  • 使用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,再安装,非常的好用哈!

C9401EA4B6F7E6053271A5F2B2CF49F4.jpg 这就完成命令注册!

不信,你试试!

提示一定是从

command not found: ayuan

syntax error near unexpected token `'hello~''

(我都替你测好几次了!)

使用node运行

好了,出现上述的提示,其实就是咱们系统不知道他要用什么环境运行

怎么告诉他?在index.js的第一行,一定是第一行哈,加下面一句话

#!/usr/bin/env node

像这样!

image.png

你再切到命令行,输入ayuan,或者你用bin的注册的命令,一定会输出hello~

如果不行,那就是你上述步骤做错了!(哎,我不管)

6F2B55C0EE5E6D0B1736FBFB69F0B5AD.jpg

注册参数命令事件

注册参数命令事件,这其实可拆两步解析参数注册参数事件

  • 解析参数 好,先说第一步,解析参数

比如,我们知道 vue-cli, 创建项目命令是vue create project

其实可以认为createproject都是参数

怎么获取?可以使用process.argv

我可以在这贴下文档(不然说我胡说八道)

image.png

这样我们不就直接用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)
    })

这行代码一定要放在

image.png

不然代码不会生效哈!

我们使用ayuan init testayuan init test -d

就会很轻松看到

image.png

image.png

好了,以上就是核心原理~

确实就酱~接下来是命令做一些的事情,包括询问用户配置、生成模板

感谢阅读~

补充:

小伙伴可能不知道怎么找vue-cli或者create-react-app的源码

拿vue-cli做例子

直接在命令行下输入 which vue,找到文件路径

image.png

发现在一个文件bin目录下,切到目录 输入 ls -l,找到vue真实文件

image.png

其实就是上一级目录中lib文件下的node_modules

image.png

而入口文件就是这个vue.js

image.png

就酱~