Niko
脚手架相关

脚手架相关


脚手架 cli 前端

首先以vue-cli为例,

vue create vue-test-app

在输入这个命令之后，发生了什么？

在终端中输入该命令后，终端会在环境变量中找到 vue 指令，也就是在 node 安装目录中的 bin 目录下的 vue（没有 bin 的话就是在根目录下），这个地方的 vue 实际上是个软链接，指向node/lib/node_modules/@vue/cli/bin/vue.js（没有 lib 的话，node_modules 也是直接在根目录下）, 实际执行的就是这个文件。所有通过 npm -g install xxx安装的包都是如此。

这里又有几个问题:

  • 为什么全局安装@vue/cli之后添加的命令是vue? 打开node/lib/node_modules/@vue/cli目录，该目录下有个package.json文件, 里面有如下配置:
  "bin": {
    // 这里的key是vue
    "vue": "bin/vue.js"
  }
  • 全局安装@vue/cli时发生了什么？
npm install -g @vue/cli

首先是把@vue/cli这个包下载到node/lib/node_modules下；然后解析目录下的package.json文件，如果发现有bin的配置项，就按此配置在node/bin目录下创建软链接(vue)，该软连接指向配置的文件地址(node/lib/node_modules/@vue/cli/bin/vue.js)。

  • 执行vue命令时发生了什么？为什么vue指向一个js文件，却可以直接通过vue命令在终端中执行？ 打开vue.js文件，在第一行可以看到一行
#!/usr/bin/env node

这行代码的效果就是告诉操作系统，先在环境变量中找到node命令, 然后通过 node 执行该文件。

实现一个简单的脚手架

以niko-cli为例 首先创建一个 niko-cli 文件夹，执行

npm init -y

在根目录下创建一个 bin 目录，bin 目录下新建一个 index.js 文件

#!/usr/bin/env node
console.log("welcome niko-cli");

修改 package.json 文件，添加 bin 选项

{
  "name": "niko-cli",
  "version": "1.0.2",
  "bin": {
    "niko": "bin/index.js"
  },
}

此时执行 npm publish 发布到线上，然后npm i -g niko-cli全局安装，执行 niko就可以看到打印出 welcome niko-cli 为了方便本地调试，可以使用 npm link 命令，会同样在 node 安装目录下生成一个niko文件，实际上是一个指向本地项目中 bin/index.js 的软链。 假设有分包的情况，需要本地调试，则需要在各个包自身npm link外，主包下执行npm link <子包name>，但是我自己本地 windows node16 环境下会报错

Cannot read properties of null (reading 'package')

猜测是环境或者版本问题，所以采用如下方式直接安装本地包

npm install ../niko-cli-lib

此时package.json内依赖如下

"dependencies": {
   "niko-cli-lib": "file:../niko-cli-lib"
 }

Lerna

而在有很多包的情况下，手动管理就会变得很麻烦、容易出错，所以就引进了lerna, 比如 vue-cli, babel, create-react-app 等项目都用了lerna做包管理。

© 2025 Niko Xie