前端一条命令是怎么跑起来的及实现一条自己的脚手架cli命令

前言

npm start

,

npm run build

,

npm run serve

…前端小伙伴们这些命令肯定都不陌生吧，那你们有没有好奇过，输入这些命令，我们的项目怎么就运行起来了呢？背后的原理是什么呢？这篇文章就带大家来一探究竟，最后还会手写一个自己的脚手架，跑一条自己的命令。

一、编译时 and 运行时

首先我们先讲一下这个老生常谈的话题，编译时及运行时的区别

编译时

代码跑在node.js的阶段

开发环境(

npm run start

)和生产环境(

npm run build

)
相同：都是将源代码打包成浏览器可执行的代码的过程
不同：开发环境生成代码在内存，生产环境代码在磁盘

运行时

代码跑在浏览器的阶段

运行时原理（以vue为例）：生成app对象 -> 调用app对象的

mount

方法将经过编译时处理的vue组件挂载到

<div id="app”></div>

上面

二、命令执行原理分析

1：package.json 文件

我这里以一个新建的react app项目为例

npx create-react-app test-cli

"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject",},

当我们使用

npm start

编译并启动项目时，它其实执行的就是package.json文件中的

scripts

下的命令，这里我们能看到

start

命令后的具体指令是

react-scripts start

，那这时我们就很好奇了

react-scripts

是什么呢？别着急，接下来就到第二步了。

2：node_modules/.bin目录

打开我们项目的node_modules/.bin目录，这里就能找到

react-scripts

相关的执行文件
.CMD文件：cmd命令是windows内核脚本文件，是windows操作系统下的可执行文件，
.ps1文件：PowerShell的脚本文件，用于执行一系列的命令和操作。

这里的

react-scripts

是个软链接，它指向哪里呢？

3：node-modules/react-scripts/packages.json文件

• 在它的package.json文件中我们能看到一个特殊的配置，就是"bin"

• 接着按照bin的配置我们去查看./bin/react-scripts.js文件，柳暗花明了，在这里看到了熟悉的build，start，eject，test。毋庸置疑，这里就是解析命令的代码了。
• 这里有一点很重要！这个文件第一行是#!/usr/bin/env node #!/usr/bin/env是用来指定脚本的解释程序的**#!/usr/bin/env node：指定用node**执行脚本文件
• 当我们把一个包作为bin声明后，npm i的时候就会把它软链到./node_modules/.bin目录下，并且还会自动把node_modules/.bin加入$PATH，这样就可以直接作为命令运行依赖程序和开发依赖程序，不用全局安装了。

三、实战：写一个自己的脚手架cli并运行

通过上面的介绍我们已经了解到一条命令是怎么跑起来的了，接下来小试牛刀，可以尝试写一个自己的脚手架cli并跑命令啦。

1：创建脚手架@silvia/cli

• 在自己的项目下创建一个cli目录，然后右键在集成终端打开
• 执行pnpm init命令，这样就会在cli下生成一个package.json文件，起一个属于自己的名字，我这里是@silvia/cli，然后最重要的一步添加bin的配置信息

{"name":"@silvia/cli","version":"1.0.0","description":"","main":"index.js","bin":{"silviacli":"./bin/index.js"},//bin，这一步很重要，用于生成软链"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"","license":"ISC"}

• 然后在cli下创建bin目录及index.js文件 这里加上最重要的#!/usr/bin/env node，然后随便打印点东西，或者写点脚手架的常见信息。

#!/usr/bin/env node

console.log("************** welcome to silvia cli ************");const{ program }=require("commander");

program
  .version("1.0.0").command("create").action((entry)=>{
    console.log("-------------- 在操作了-----------");});

program.parse(process.argv);

至此，一个简单的脚手架就创建完啦，接下来去使用它。

2：让自己的命令跑起来

• 在自己的项目终端安装它，pnpm add @silvia/cli --filter test-cli
• 然后在scripts中加一条自己的命令"silviastart": "silviacli"
• 然后执行npm run silviastart，我们就能看到脚手架中打印的内容啦！ 至此，属于我们自己的命令就跑起来啦！撒花❀❀❀❀❀

本文章参考：
@前端欧阳：https://vue-compiler.iamouyang.cn
https://www.jb51.net/article/254129.htm