保姆级教程——逐步剖析前端脚手架工具cli的基本原理

最新推荐文章于 2024-06-27 18:24:40 发布

置顶

小敏哥

最新推荐文章于 2024-06-27 18:24:40 发布

阅读量1k

点赞数 1

分类专栏： web前端文章标签： cli vue-cli cli原理前端模板工具

本文链接：https://blog.csdn.net/handsomexiaominge/article/details/108310821

版权

本文通过动手创建一个简易的CLI工具，详细剖析前端脚手架工具如vue-cli的基本工作原理，涵盖从创建文件、npm初始化、接收参数、用户交互到拉取远程模板代码的全过程，帮助读者理解CLI的实现机制。

摘要由CSDN通过智能技术生成

前言

本文默认读者已安装了node，npm等工具，并了解其基本用法，涉及到此类内容将不会深入讲解，此类基础环境的安装过程将会略去

开篇

相信写过react和vue的小伙伴们都会用到create-react-app和vue-cli这类脚手架工具，那么有没有想过，这类工具是怎么做出来的呢？cli是command-line interface（命令行界面）的缩写，本篇文章的目标是通过动手写一个cli工具，来剖析vue-cli这类脚手架工具的基本原理

动手

首先我们新建一个test-cli文件夹，里面只有一个index.js文件，index.js的内容如下

#!/usr/bin/env node
console.log('hello cli');

然后我们在test-cli的目录下执行npm init命令，生成一个package.json文件，要求不高，输入后一路回车就可以了，此时我们可以生成如下的package.json

{
  "name": "test-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

然后我们手动给package.json添加一些代码


  "bin":{
    "test-cli" : "./index.js"
  },

这里暂停一下，解释两个知识点，一个是#!/usr/bin/env node，一个是package.json里面的bin

#!/usr/bin/env node

对于文件来说，#!这个符号代表此文件可以当做脚本运行，那么怎么运行呢，/usr/bin/env node这行的意思就是用node来执行此文件，node怎么来呢，就去用户(usr)的安装根目录(bin)下的env环境变量中去找，简单的说就是如果在windows上面，就去安装node的bin目录去找node执行器，一般我们都放在环境变量中，简单来说，就是帮助文件找到正确的执行器

bin

对于一个模块来说，如果是全局安装，则npm会为bin中配置的文件在bin目录下创建一个软连接（对于windows系统，默认会在C:\Users\username\AppData\Roaming\npm目录下），如果是局部安装，则会在项目内的./node_modules/.bin/目录下创建一个软链接。因此，按上面的例子，安装test-cli的时候，npm就会为index.js在/usr/local/bin/test-cli路径创建一个软链接。这样，当我们安装完test-cli后，我们在控制台中执行test-cli就相当于执行node index.js