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 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪2 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im7 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon8 分钟前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子9 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy10 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心10 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
hxmmm15 分钟前
webpack多入口打包文件
前端
CAD老兵16 分钟前
前端组件库的多主题实现原理与实战指南
前端
归于尽18 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript