学习笔记——主攻 vite

学习笔记------主攻 vite

从原理模拟开始，手动实现 vite 的基础加载处理逻辑，加载出我们的 jsx 语法编译出的 react 页面

开始进行构建优化，从开发环境开始，对开发环境进行构建优化，提升开发舒适度

开始进行生产打包构建优化，对生产环境进行构建优化

开始进行插件开发

回归到文档进行查漏补缺

实现一个小的 jsx 语法加载过程

先暂时使用 babel 进行 jsx 语法的处理和转化本地实现服务器进行请求拦截遇到 jsx 文件就进行代码的转化从而将转化之后的结果返回给浏览器，浏览器进行渲染

js 复制代码

/* 服务器拦截代码 */
const http = require("http");
const fs = require("fs");
const path = require("path");
const { transform } = require("@babel/core");

const server = http.createServer(async (req, res) => {
  const filePath = path.join(__dirname, req.url.split("?")[0]);

  try {
    if (filePath.endsWith(".jsx")) {
      const code = await fs.promises.readFile(filePath, "utf-8");

      // 使用 Babel 编译 JSX
      const result = transform(code, {
        presets: ["@babel/preset-react"],
        filename: filePath,
      });

      res.writeHead(200, { "Content-Type": "application/javascript" });
      res.end(result.code);
    } else {
      const content = await fs.promises.readFile(filePath);
      res.end(content);
    }
  } catch (err) {
    res.writeHead(404);
    res.end("Not Found");
  }
});

server.listen(5500, "127.0.0.1", () => {
  console.log("Dev server running at http://127.0.0.1:5500");
});

html 复制代码

<!-- 本地 html 代码 -->

<!DOCTYPE html>
<html>
  <head>
    <title>Mini Vite</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 加载 React 和 ReactDOM (CDN 版本) -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <!-- 加载我们的 JSX 文件 -->
    <script type="module" src="./App.jsx"></script>
  </body>
</html>

js 复制代码

/* App.jsx */
import Button from "./button.jsx"; // 确保路径正确
const App = () => {
  return (
    <h1>
      <Button />
    </h1>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

/* button.jsx */
const Button = () => {
  return <button>Click Me</button>;
};

export default Button; // 必须单独导出

请求结果预览

让我们看看拦截之后返回我们的 jsx 处理之后代码

App.jsx

button.jsx