二、命令执行原理分析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相关的执行文件

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

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

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

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

1：创建脚手架@silvia/cli

{
  "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"
}

#!/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：让自己的命令跑起来

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

本文章参考：@前端欧阳：/post/739728…