前端脚手架核心原理

相信小伙伴们若是学过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

就酱～