前言

<code>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": { -- -->code>

"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目录

这里的<code>react-scripts是个软链接，它指向哪里呢？

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

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

接着按照bin的配置我们去查看<code>./bin/react-scripts.js文件，柳暗花明了，在这里看到了熟悉的build，start，eject，test。毋庸置疑，这里就是解析命令的代码了。

这里有一点很重要！这个文件第一行是<code>#!/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目录，然后右键在集成终端打开

执行<code>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，然后随便打印点东西，或者写点脚手架的常见信息。

<code>#!/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"

然后执行<code>npm run silviastart，我们就能看到脚手架中打印的内容啦！

至此，属于我们自己的命令就跑起来啦！撒花❀❀❀❀❀

本文章参考：

@前端欧阳：https://vue-compiler.iamouyang.cn

https://www.jb51.net/article/254129.htm