前端一条命令是怎么跑起来的及实现一条自己的脚手架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