前端脚手架实现原理

相信每一个前端开发都使用过脚手架特别是使用一些主流框架的时候都会使用框架提供的脚手架来初始化项目
下面就来说说脚手架的实现原理

使用 yarn 或者 npm 全局安装脚手架后发生了什么

在使用yarn或者npm进行全局安装组件的时候，除了会将组件下载下来安装到全局的node_modules下外，有一个package.json中的小小配置帮我们把我们写在配置文件中的命令注册为环境中的命令，那就是 bin

npm官方文档 package.json - bin

我们可以在package.json中配置：

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

这样就可以把cli-base注册为系统命令来运行脚本了。

执行命令时发生了什么，为什么可以直接运行js文件

那么问题又来了，我们写的是javascript代码为什么执行这个命令时，就能直接执行javascript代码呢？

我们通过which命令看看这个命令的可执行文件在哪里：

➜  ~ which cli-base
/Users/ashin/.nvm/versions/node/v10.20.0/bin/cli-base

which 命令是Unix-like系统下提供的命令可以找到命令的可执行文件位置

➜  ~ ls -l /Users/ashin/.nvm/versions/node/v10.20.0/bin/cli-base
lrwxr-xr-x  1 ashin  staff  41  6 11 16:12 /Users/ashin/.nvm/versions/node/v10.20.0/bin/cli-base -> ../lib/node_modules/cli-base/bin/index.js
➜  ~

我们在用ls -l 看下这个命令具体信息，原来它是一个链接，链接到了/Users/ashin/.nvm/versions/node/v10.20.0/lib/node_modules/cli-base/bin/index.js 这个文件

文件内容：

#!/usr/bin/env node

console.log('hello')

#!/usr/bin/env node 的作用是帮我们在环境变量中找到node命令并用node命令去执行这个文件。

那么真相大白了，当我们运行在package.json中注册的命令的时候，实际就是执行了我们在package.json中bin下配置的文件，并且用node执行了它。

完整代码点这里

link本地调试

如果想在本地调试命令我们可以在cli项目根目录下使用 npm link，这样就可以在本地调试啦～