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 最重要的方法。 下一节我们将继续研究该方法。

相关推荐
鱼樱前端1 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix2 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易2 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全