乐趣区

关于node.js:前端脚手架是如何工作的呢

jiezi

随着前端工程化工具的衰亡，日常的开发中大家也很少会间接 html,js,css 一把梭哈去开发，都是应用前端框架配合对应的脚手架来初始化一个我的项目，比方 vue 的vue-cli，react的 create-react-app 等。咱们只须要全局装置一下这些脚手架，而后输出 vue create name 或者 create-react-app name 就能够很不便的去初始化一个对应的我的项目。那你有想过装置完脚手架后这些命令背地都做了哪些事吗？

以 vue-cli 为例，首先咱们先全局装置vue-cli：

npm install -g @vue/cli

装置胜利后，通过 vue -V 查看版本，证实装置胜利，并且有了全局的 vue 命令。关上终端，输出 which 查看 vue 命令对应的可执行文件所在门路：

$ which vue
/usr/local/bin/vue

查看 bin 目录下 vue 文件对应的信息：

ls -l /usr/local/bin/ | grep vue
lrwxr-xr-x  1 xxx  admin        39 Sep 27  2018 vue ->../lib/node_modules/@vue/cli/bin/vue.js

咱们发现这里的 vue 只是一个软连贯，实在的文件指向这里../lib/node_modules/@vue/cli/bin/vue.js。好的，剥茧抽丝，咱们持续去找这个可执行文件：

ls /usr/local/lib/node_modules/@vue/cli/bin 
vue.js

Bingo！就是它！也就是说咱们在全局执行的 vue 命令就是在执行这个vue.js。可是你该问了，这明明是个js 文件，怎么就能间接执行了呢？不急咱们关上这个文件看看：

#!/usr/bin/env node

// Check node version before requiring/doing anything else
// The user may be on a very old node version

const chalk = require('chalk')
const semver = require('semver')
......

神秘就在第一行：#!/usr/bin/env node，有趣味的能够看看什么是 Sha-Bang。简略的说这句话就是指定这个 vue.js 脚本的执行应用 node 作为解释器。也就是说加了这一句话，你能够间接通过 ./vue.js 的形式间接执行这个 js 脚本，成果跟 node vue.js 是一样的。

可是仔细的你还有一个问题，为什么我装置的是 @vue/cli, 然而注册的命令却是vue 呢？其实这个咱们来看一下 @vue/cli 的package.json就晓得了：

{
  "name": "@vue/cli",
  "version": "3.8.2",
  "description": "Command line interface for rapid Vue.js development",
  "bin": {"vue": "bin/vue.js"}
  ......
}

这外面通过 bin 指定了可执行文件的命令名以及可执行文件的门路，npm装置一个依赖时，如果该依赖的 package.json 中指定了 bin 的信息，那么同时会创立一个全局的软连贯指向该命令所对应的可执行文件。有趣味的能够看看 npm 的官网文档：package.json 中 bin 的作用。

退出移动版