cli：vite 的启起点

# 目录

目录
start
cli
相关工具库

# start

我们知道在使用 vite 时是将 vite 作为 npm 命令能使用以启动我们的项目的，因为 vite 实质上应该是 bin（二进制）工程项目。因此在 vite 目录下的 package.json 文件中可以找到 bin 的入口为 bin/vite.js 。因此我们先来看下 vite.js 这个启动文件。

在 vite.js 文件中主要对 cli 中 debug、profile 等特殊的参数进行处理，挂载到 process.env 或者 global 上，进而调用 start 函数。

function start() {
  require('../dist/node/cli')
}

1
2
3

此处调用的是打包后的文件，由 src/node/cli.ts 打包生成，这里才真正进入 cli 的处理环节。

# cli

编写 cli.option

// cli.option(name, description, config?)
cli.option('-c, --config <file>', `[string] use specified config file`)

1
2

定义参数的简写，全写，参数值占位和参数说明。
支持链式调用。

注册的 command 命令

vite serve (dev) 命令：启动 dev server。

action 部分的处理：

async (root: string, options: ServerOptions & GlobalCLIOptions) => {
    // output structure is preserved even after bundling so require()
    // is ok here
    const {
        createServer
    } = await import('./server')
    try {
        // 创建 dev server
        const server = await createServer({
            root,
            base: options.base,
            mode: options.mode,
            configFile: options.config,
            logLevel: options.logLevel,
            clearScreen: options.clearScreen,
            server: cleanOptions(options)
        })
        // 检测是否可使用 http server
        if (!server.httpServer) {
            throw new Error('HTTP server not available')
        }
        // 开始 dev server 监听进程
        await server.listen()
        //  获取到 info logger
        const info = server.config.logger.info

        info(
            chalk.cyan(`\n  vite v${require('vite/package.json').version}`) +
            chalk.green(` dev server running at:\n`), {
                clear: !server.config.logger.hasWarned
            }
        )
        // 打印 server url
        server.printUrls()
        // 打印启动时间统计
        // @ts-ignore
        if (global.__vite_start_time) {
            // @ts-ignore
            const startupDuration = performance.now() - global.__vite_start_time
            info(`\n  ${chalk.cyan(`ready in ${Math.ceil(startupDuration)}ms.`)}\n`)
        }
    } catch (e) {
        createLogger(options.logLevel).error(
            chalk.red(`error when starting dev server:\n${e.stack}`), {
                error: e
            }
        )
        // 退出程序
        process.exit(1)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

这个命令的主要作用就是：开始 dev server、打印 server 信息和错误处理。

vite build 命令：项目打包

action 部分的处理：

async (root: string, options: BuildOptions & GlobalCLIOptions) => {
    const {
        build
    } = await import('./build')
    const buildOptions: BuildOptions = cleanOptions(options)
    // build project
    try {
        await build({
            root,
            base: options.base,
            mode: options.mode,
            configFile: options.config,
            logLevel: options.logLevel,
            clearScreen: options.clearScreen,
            build: buildOptions
        })
    } catch (e) {
        createLogger(options.logLevel).error(
            chalk.red(`error during build:\n${e.stack}`), {
                error: e
            }
        )
        process.exit(1)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这里调用了异步方法 build 来打包项目。这个命令的主要作用是：项目打包。

vite optimize: 依赖优化

action 部分的处理：

async (root: string, options: {
    force ? : boolean
} & GlobalCLIOptions) => {
    const {
        optimizeDeps
    } = await import('./optimizer')
    try {
        // 处理 config
        const config = await resolveConfig({
                root,
                base: options.base,
                configFile: options.config,
                logLevel: options.logLevel
            },
            'build',
            'development'
        )
        // 优化依赖项
        await optimizeDeps(config, options.force, true)
    } catch (e) {
        createLogger(options.logLevel).error(
            chalk.red(`error when optimizing deps:\n${e.stack}`), {
                error: e
            }
        )
        process.exit(1)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

vite 会对项目的依赖关系进行缓存，此命名可重建依赖缓存。

vite preview: production 模式的预览

action 部分的处理：

async (
    root: string,
    options: {
        host ? : string | boolean
        port ? : number
        https ? : boolean
        open ? : boolean | string
        strictPort ? : boolean
    } & GlobalCLIOptions
) => {
    // 模拟 server 以 buildDir 为静态目录 serve 资源
    try {
        const server = await preview({
            root,
            base: options.base,
            configFile: options.config,
            logLevel: options.logLevel,
            preview: {
                port: options.port,
                strictPort: options.strictPort,
                host: options.host,
                https: options.https,
                open: options.open
            }
        })
        server.printUrls()
    } catch (e) {
        createLogger(options.logLevel).error(
            chalk.red(`error when starting preview server:\n${e.stack}`), {
                error: e
            }
        )
        process.exit(1)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这部分模拟真实的服务器对打包的资源提供服务，预览 dist 在真实 server 环境下的表现。

cli.help(): Display help message when -h or --help appears.
cli.version(): Display version number when -v or --version appears.
cli.parse(): Parse CLI args.

# 相关工具库

cacjs/cac (opens new window):Simple yet powerful framework for building command-line apps.
chalk/chalk (opens new window): Terminal string styling done right.

编辑

上次更新: 2022/04/28, 23:58:26

← 本章概要 server： dev server 的创建→