跳到主要内容

官方模拟版

2023年06月11日
柏拉文
越努力，越幸运

一、实现​

备注: 这部分只实现 mini-vite 中的 CLI 功能

1.1 安装依赖​

运行时依赖

pnpm i cac chokidar connect debug es-module-lexer esbuild fs-extra magic-string picocolors resolve rollup sirv ws -S

开发环境依赖

pnpm i @types/connect @types/debug @types/fs-extra @types/resolve @types/ws tsup

tsup: tsup 也能够实现库打包的功能，并且内置 esbuild 进行提速，性能上更加强悍，因此在这里我们使用 tsup 进行项目的构建

connect: connect 是一个具有中间件机制的轻量级 Node.js 框架, 既可以单独作为服务器，也可以接入到任何具有中间件机制的框架中，如 Koa、Express

picocolors: 是一个用来在命令行显示不同颜色文本的工具

es-module-lexer: 用来分析 es 模块 import/export 语句的库

resolve: 一个实现了 node 路径解析算法的库

fs-extra: 一个更加好用的文件操作库

debug: 用来开发打印 debug 日志的库

1.2 环境目录​

viteMini 目录

|--bin  // viteMini CLI 命令
|--dist
|--src  // viteMini 核心代码
|--test // 用于测试 viteMini CLI
    |--- package.json 
|--- package.json

1.3 src 构建​

新建 src/node/cli.ts 文件，进行 cli 的初始化:

import cac from 'cac';
import { startDevServer } from './server';

const cli = cac();

cli
  .command('[root]', 'Run the development server')
  .alias('serve')
  .alias('dev')
  .action(async () => {
    await startDevServer();
  });

cli.help();
cli.parse();

新建 src/node/server/index.ts，内容如下:

import connect from 'connect';
import { blue, green } from 'picocolors';

export async function startDevServer() {
  const app = connect();
  const root = process.cwd();
  const startTime = Date.now();
  app.listen(3000, async () => {
    console.log(
      green('🚀 No-Bundle 服务已经成功启动!'),
      `耗时: ${Date.now() - startTime}ms`
    );
    console.log(`> 本地访问路径: ${blue('http://localhost:3000')}`);
  });
}

1.4 bin 构建​

新建 bin/mini-vite 文件来引用产物

#!/usr/bin/env node

require("../dist/index.js");

1.5 test 构建​

根目录新建 test 目录, 并执行 pnpm init 进行初始化

1.6 package.json 命令​

为了接入 tsup 打包功能，你需要在 package.json 中加入这些命令:

"scripts": {
    "start": "tsup --watch",
    "build": "tsup --minify"
}

现在你可以执行 pnpm start 来编译这个 mini-vite 项目，tsup 会生成产物目录dist，然后你可以新建bin/mini-vite文件来引用产物

同时，你需要在 package.json 中注册 mini-vite 命令，配置如下:

{
  "bin": {
    "mini-vite": "bin/mini-vite"
  }
}

1.7 test package.json 命令​

script 中增加如下命令:

"scripts": {
    "dev": "mini-vite"
}

dependencies中已经声明 mini-vite:

{
  "devDependencies": {
    "mini-vite": '../'
  }
}

随后执行 pnpm install, 那么 mini-vite 命令会自动安装到测试项目的 node_modules/.bin 目录中

1.8 tsconfig.json 配置文件​

在项目根目录新建tsconfig.json这份配置文件，内容分别如下:

// tsconfig.json
{
  "compilerOptions": {
    // 支持 commonjs 模块的 default import，如 import path from 'path'
    // 否则只能通过 import * as path from 'path' 进行导入
    "esModuleInterop": true,
    "target": "ES2020",
    "moduleResolution": "node",
    "module": "ES2020",
    "strict": true
  }
}

1.9 tsup.config.ts 配置文件​

在项目根目录新建tsup.config.ts这份配置文件，内容分别如下:

// tsup.config.ts
import { defineConfig } from "tsup";

export default defineConfig({
  // 后续会增加 entry
  entry: {
    index: "src/node/cli.ts",
  },
  // 产物格式，包含 esm 和 cjs 格式
  format: ["esm", "cjs"],
  // 目标语法
  target: "es2020",
  // 生成 sourcemap
  sourcemap: true,
  // 没有拆包的需求，关闭拆包能力
  splitting: false,
});

二、测试​

备注: 这一部分只测试 mini-vite 中的 CLI 功能

我们在 test 项目中执行 pnpm dev 命令(内部执行mini-vite)，可以发现终端出现如下的启动日志:

Preview

OK，mini-vite 的 cli 功能和服务启动的逻辑目前就已经成功搭建起来了。