Vite 源码系列(1):Vite 启动时的命令行处理

前言

上一节中我们找到了 Vite 启动的入口文件 bin/vite.js,其内容如下。

文件的最后调用了 start方法,start 方法的作用是 import ../dist/node/cli.js 这个文件,被 import 的文件接着将会执行。 这里的 ../dist/node/cli.js 路径我们需要换成 ../src/node/cli.ts,因为我们看的是未打包 src目录下的源码。

命令行参数

在启动 Node.js 程序时可以在命令行的后面追加你需要的参数。比如 node example.js argument1 argument2,这里的argument1argument2就是命令行参数。

在 Node.js 中有一个全局的环境变量 process,该变量上有一个 argv 属性。argv属性的值是一个数组。数组的第一位是 node 程序可执行文件的绝对路径,数组的第二位是被执行的 js 文件的绝对路径,剩下的元素是命令行中追加的参数。

我们用下面这段 js 来试一下

js 复制代码
import { argv } from 'node:process';

// 打印 argv 对象
console.log(argv)

命令行中输入 node index.js argument1 argument2,得到的结果如下。

可以看到数组的前两位分别是 Node.js 可执行程序的绝对路径和被执行的 js 文件的绝对路径,剩下的是我们在命令行追加的参数。

认识 cac 包

cac 可以帮助你解析命令行中的参数,创建命令行界面。类似的包还有commanderyargs

cac 轻量,易用且功能强大。最常用的两个方法是 commandoptioncommand方法可以解析命令行中的命令参数,option 方法可以解析命令行中的选项参数。两者还可以连用,将选项和命令联系起来。

你可以直接使用option方法解析一个选项参数

js 复制代码
import { cac } from "cac";
const cli = cac("cli");

cli.option('--type [type]', 'Choose a project type')
const parsed = cli.parse()
// 打印解析的结果
console.log(JSON.stringify(parsed))

也可以将选项解析和命令解析联系,这样 cac 只会解析 test 命令后面的选项参数。

js 复制代码
import { cac } from "cac";
const cli = cac("cli");
cli
  .command('test', 'Test command')
  .option('--type [type]', 'Choose a project type')
  .action(options => {
    console.log(options)
  })

cli.parse()

Vite 命令行参数的解析

我们打开../src/node/cli.ts这个文件,首先引入 cac 并创建 cli 对象。

接着链式调用 option 方法来解析选项参数。--config --base等这些选项是不和命令挂钩的,所以直接调用 option 方法解析。

接着调用command方法解析和命令挂钩的选项。这些命令分别对应 Vite 提供四种命令:

  1. 不提供命令servedev 启动开发服务器
  2. build 打包
  3. optimize 预构建
  4. preview 预览

我们看和启动开发服务器相关的。

想要启动开发服务器,输入vite既可,不需要在vite后面添加任何命令。command第一个参数中的[root]代表的是项目根目录参数,同vite.config.js中的 root属性。

Vite 还提供了启动开发服务的别名servedev,所以vite serve或者vite dev也可以启动开发服务,所以需要调用 alias 方法把这两个命令也加上去。

最后通过action方法获取到命令行解析的结果。

打开 action 方法,该方法接受一个回调函数,回调函数接收的是命令行解析的结果。可以看到 vite 利用这些解析的结果调用 createServer 方法创建了一个服务。

createServer 方法在 src/node/serve/index.ts中。该方法是 Vite 最重要的方法。 下一节我们将继续研究该方法。

相关推荐
风若飞5 分钟前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑12 分钟前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia12 分钟前
如何找回Harbor密码
前端
码码哈哈0.012 分钟前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩13 分钟前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆14 分钟前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了21 分钟前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆22 分钟前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
带娃的IT创业者24 分钟前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
weixin_4316004425 分钟前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
前端·javascript·vue.js