Vite 核心原理

安装依赖

bash

npm install connect es-module-lexer resolve check-is-array esbuild fast-glob fs-extra serve-static magic-string chokidar ws  hash-sum --save

Connect

Connect 是一个框架，被称为中间件的模块化组件，以可重用的方式实现 web 程序的逻辑
在 Connect 中，中间件组件是一个函数，它拦截 HTTP 服务器提供的请求和相应，执行逻辑，或者结束相应，或者把它传递给下一个中间件组件
Connect 用分配器把中间件连接在一起
Express 就是构建在 Connect 之上的高层框架

使用

const connect = require("connect");
const http = require("http");

const app = connect();
const m1 = (req, res, next) => {
  console.log("m1");
  next();
};
const m2 = (req, res, next) => {
  console.log("m2");
  next();
};
const m3 = (req, res, next) => {
  // 有了res.end，并且下面不调用next就不会在往下走了
  console.log("m3");
  res.end("m3");
};
const m4 = (req, res, next) => {
  console.log("m4");
  next();
};
app.use(m1);
app.use(m2);
app.use(m3);
app.use(m4);

http.createServer(app).listen(3000);

实现

// 简易版
const connect = () => {
  const middlewares = [];
  const handler = (req, res) => {
    let index = 0;
    const next = () => {
      middlewares[index++](req, res, next);
    };
    next();
  };
  handler.use = (handle) => {
    middlewares.push(handle);
  };

  return handler;
};

serve-static

serve-static 是一个静态文件中间件

const connect = require("connect");
const static = require("serve-static");
const http = require("http");

const middlewares = connect();
middlewares.use(static(__dirname));
http.createServer(middlewares).listen(3001);

es-module-lexer

es-module-lexer 是一个 JS 模块语法解析器

const { init, parse } = require("es-module-lexer");
(async () => {
  await init;
  const [imports, exports] = parse(`import _ from 'lodash';\nexport var p = 5`);
  console.log(imports); // [{ n: 'lodash' }]
  console.log(exports); // ['p']
})();

resolve

es-module-lexer 实现了 node 的 require.resolve()算法

const resolve = require("resolve");
console.log(__dirname); // 项目根目录
const res = resolve.sync("check-is-array", { basedir: __dirname });
console.log(res); // 项目根目录下/node_modules/check-is-array/index.js

fast-glob

fast-glob 该包提供了一些方法，用于遍历文件系统，并根据 Unix Bash shell 使用的规则返回与指定模式的定义集匹配的路径名

const fg = require("fast-glob");
(async () => {
  const entries = await fg(["**/*.js"], {
    deep: 3,
    ignore: ["node_modules", "src"],
  });
  // 返回匹配的文件，deep控制层数,ignore:忽略文件夹
  console.log(entries); // 返回项目
})();

magic-string

magic-string 是一个用来操作字符串的库

const MagicString = require("magic-string");
const ms = new MagicString("var age = 10");
ms.overwrite(10, 12, "11");
console.log(ms.toString());