前端模块化-手写mini-vite

最新推荐文章于 2024-10-14 20:03:12 发布
最新推荐文章于 2024-10-14 20:03:12 发布
阅读量415 收藏 6
点赞数 3
分类专栏： 前端模块化 文章标签： 前端 模块化 打包工具 vite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuanyemanong/article/details/141004463
版权

前言

本文总结了一些关于 Vite 的工作原理，以及一些实现细节。

本节对应的 demo 可以在这里找到。

什么是 Vite

Vite 是一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。

实现步骤

  • 项目搭建
  • 实现 cli
  • 起静态服务器, nodemon 监听文件修改，执行 vite 命令
  • 处理 index.html
  • 处理 js，处理 node_modules 的引入
  • 中间件拆分
  • 处理 react 文件

项目结构

├── _example
├── cli
│ └── index.js
├── src
│ └── index.js

_example 通过 npx create-vite-app 创建的 vite 项目， 用于和 mini-vite 对比

npx create-vite _example --template react

实现 cli

新建 cli/index.js

#! /usr/bin/env node
console.log("mini-vite!");

mini-vite/package.json

{
  "bin": "cli/index.js"
}

通过 yarn link 将 cli 链接到全局

#  _demo/mini-vite目录
yarn link

在 _example 中 link

#  _demo/mini-vite/_example目录
yarn link mini-vite

在 package.json 中添加命令

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

跑下 dev:mini-vite 命令，可以看到控制台已经打印出 mini-vite!

起静态服务器

依赖安装

yarn add koa koa-static

在 src 目录下新建 index.js

// src/index.js
const Koa = require("koa");
const KoaStatic = require("koa-static");

const app = new Koa();

// 执行命令时的路径
const rootPath = process.cwd();
app.use(KoaStatic(rootPath));

app.listen(8000, () => {
  console.log("mini-vite server启动成功！");
});

同时，在_example 中的 package.json 中添加命令

{
  "scripts": {
    "dev:mini-vite": "nodemon -w ../ --exec mini-vite",
    "mini-vite": "mini-vite"
  }
}

并安装 nodemon

# mini-vite/_example
yarn add nodemon -D

执行，可以看到控制台打印出 mini-vite server 启动成功！同时在浏览器中打开 http://localhost:8000/ 可以看到项目已经跑起来了。(这里的端口号是 8000，是因为 create-vite-app 默认的端口号是 3000，所以这里我们用 8000)

同时修改 index.js 也可以看到 terminal 中打印出修改成功。

处理 jsx

现在我们已经可以返回静态文件了，但是在返回 index.html 中后，浏览器随即发起了 src/main.jsx 的请求

<script type="module" src="/src/main.jsx"></script>

然后就报错了，因为浏览器无法解析 jsx 文件，所以我们需要对.jsx 进行处理，将 src/main.jsx 改为 src/main.js

main.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/jsx”. Strict MIME type checking is enforced for module scripts per HTML spec.

首先是 jsx 的转换

在 mini-vite 目录安装依赖：

# mini-vite
yarn add  @babel/core @babel/plugin-transform-react-jsx

添加 transformJsx 函数

function transformJsx(jsxCode) {
  const babel = require("@babel/core");

  const options = {
    // presets: ['@babel/preset-env'], // 注意这里不要使用 @babel/preset-env，因为它会将所有的代码都转换成 ES5，包括import
    plugins: [
      [
        "@babel/plugin-transform-react-jsx",
        {
          pragma: "React.createElement",
          pragmaFrag: "React.Fragment",
        },
      ],
    ],
  };

  const { code } = babel.transform(jsxCode, options);

  return code;
}

修改 src/index.js 的代码， 进行了一点重构， 添加中间件的机制

// index.js
const Koa = require("koa");
const KoaStatic = require("koa-static");

function createServer() {
  const app = new Koa();

  const context = {
    app,
    rootPath: process.cwd(),
  };
  const resolvePlugins = [moduleRewirePlugin, serverStaticPlugin];

  resolvePlugins.forEach((plugin) => plugin(context));
}

createServer();

function serverStaticPlugin({ app, rootPath }) {
  app.use(KoaStatic(rootPath));
  app.use(KoaStatic(rootPath, "/public"));

  app.listen(8000, () => {
    console.log("mini-vite server启动成功！");
  });
}

function moduleRewirePlugin({ app, context }) {
  app.use(async (ctx, next) => {
    await next();
    if (ctx.body && ctx.response.is("jsx")) {
      // 初始的 ctx.body 是一个 Readable 流，需要转换成字符串
      const jsxCode = await readBody(ctx.body);
      // 通过babel转换jsx代码
      const transformedCode = transformJsx(jsxCode);

      ctx.type = "application/javascript";
      ctx.body = transformedCode;
    }
  });
}

function transformJsx(jsxCode) {
  const babel = require("@babel/core");

  const options = {
    // presets: ['@babel/preset-env'], // 注意这里不要使用 @babel/preset-env，因为它会将所有的代码都转换成 ES5，包括import
    plugins: [
      [
        "@babel/plugin-transform-react-jsx",
        {
          pragma: "React.createElement",
          pragmaFrag: "React.Fragment",
        },
      ],
    ],
  };

  const { code } = babel.transform(jsxCode, options);

  return code;
}

function readBody(stream) {
  return new Promise((resolve, reject) => {
    if (!stream.readable) {
      resolve(stream);
    } else {
      let res = "";
      stream.on("data", (data) => {
        res += data;
      });
      stream.on("end", () => {
        resolve(res);
      });
      stream.on("error", (err) => {
        reject(err);
      });
    }
  });
}

可以看到此时浏览器已经成功请求到了 main.js， 并且我们的 jsx 语法也被转换成了 React.createElement

但此时浏览器报错了

Uncaught TypeError: Failed to resolve module specifier “react”. Relative references must start with either “/”, “./”, or “…/”.

原因是我们在 main.js 中引入了 react，但是浏览器无法解析 node_modules 中的模块，所以我们需要对 node_modules 中的模块进行处理。

处理 node_modules

添加自定义的 babel 插件

module.exports = function ({ types: t }) {
  return {
    visitor: {
      ImportDeclaration(path, state) {
        const { node } = path;
        const id = node.source.value;
        // 简化场景： 不是以 / . 开头的，都是第三方模块，不考虑alias等其他情况
        if (/^[^\/\.]/.test(id)) {
          node.source = t.stringLiteral("/@modules/" + id);
        }
      },
    },
  };
};

服务端做对应的处理

const customAliasPlugin = require("./babel-plugin-custom-alias");

const regex = /^\/@modules\//;
function moduleResolvePlugin({ app, context }) {
  app.use(async (ctx, next) => {
    if (!regex.test(ctx.path)) {
      return next();
    }
    const id = ctx.path.replace(regex, "");
    console.log("id", id);

    const mapping = {
      // 从package.json中读取esm读出来的字段，这里只是简化了一下，正常应该从package.json中读取esm导出
      react: path.resolve(process.cwd(), "node_modules/react/index.js"),
      "react-dom/client": path.resolve(
        process.cwd(),
        "node_modules/react-dom/client.js"
      ),
    };

    ctx.type = "application/javascript";

    const content = fs.readFileSync(mapping[id], "utf-8");

    ctx.body = content;
  });
}

上述操作遇到一个问题就是，react 没有提供 esm 的版本！

看了下 React 官方的 package.json 的 export 字段

{
  "exports": {
    ".": {
      "react-server": "./react.shared-subset.js",
      "default": "./index.js"
    },
    "./package.json": "./package.json",
    "./jsx-runtime": "./jsx-runtime.js",
    "./jsx-dev-runtime": "./jsx-dev-runtime.js"
  }
}

找到对应的 index.js

"use strict";

if (process.env.NODE_ENV === "production") {
  module.exports = require("./cjs/react.production.min.js");
} else {
  module.exports = require("./cjs/react.development.js");
}

这里也提到了：https://segmentfault.com/q/1010000043780457

两种方案

    1. 找一个有 esm 的版本，比如 https://github.com/esm-bundle/react
    1. 还是原来的包，但是需要在服务端做一些处理，将 cjs 的包转换成 esm 的包

看看 vite-plugin-react 是如何这个问题的, 还是回到浏览器，查看正常 vite 打包出来的文件

import __vite__cjsImport0_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=78b1e259";
const jsxDEV = __vite__cjsImport0_react_jsxDevRuntime["jsxDEV"];
import __vite__cjsImport1_react from "/node_modules/.vite/deps/react.js?v=78b1e259";
const React = __vite__cjsImport1_react.__esModule
  ? __vite__cjsImport1_react.default
  : __vite__cjsImport1_react;
import __vite__cjsImport2_reactDom_client from "/node_modules/.vite/deps/react-dom_client.js?v=78b1e259";
const ReactDOM = __vite__cjsImport2_reactDom_client.__esModule
  ? __vite__cjsImport2_reactDom_client.default
  : __vite__cjsImport2_reactDom_client;
import App from "/src/App.jsx";
// ReactDOM.createRoot(document.getElementById("root")).render

看了下 node_modules/.vite/deps/react.js，确实是把代码 copy 了一份，然后把 cjs 的包转换成了 esm 的包，这个过程在 vite 中称为 optimizeDeps

处理 commonJS

vite 内部用了 esbuild 去处理，这里我们就不用 esbuild 了，直接用 babel 去处理

yarn add @babel/core babel-plugin-transform-commonjs

🚧🚧🚧： 注意，这里有两个包

  1. @babel/plugin-transform-modules-commonjs: 将 esm 转换成 cjs
  2. @babel/plugin-transform-commonjs: 将 cjs 转换成 esm

我们在启动服务的时候，添加一个 setupDevDepsAssets 的过程

setupDevDepsAssets(process.cwd());

/**
 * 依赖预构建，将react, react-dom, scheduler等第三方库转换成ES Module， 写入开发临时文件夹
 * @param {*} rootPath
 */
function setupDevDepsAssets(rootPath) {
  //查看node_modules/.mini-vite
  const tempDevDir = path.resolve(rootPath, "node_modules", ".mini-vite");

  if (!fs.existsSync(tempDevDir)) {
    fs.mkdirSync(tempDevDir);
  }

  // 将项目中的 react, react-dom, scheduler 等第三方库转换成 ES Module，写入到 node_modules/.mini-vite 目录下
  // 这里只是简化，实际上要从index.html中开始递归查找依赖，然后再转换
  const mapping = {
    react: {
      sourcePath: path.resolve(
        rootPath,
        "node_modules/react/cjs/react.development.js"
      ),
      targetPath: path.resolve(tempDevDir, "react.js"),
    },
    "react-dom/client": {
      sourcePath: path.resolve(
        rootPath,
        "node_modules/react-dom/cjs/react-dom.development.js"
      ),
      targetPath: path.resolve(tempDevDir, "react-dom.js"),
    },
    scheduler: {
      sourcePath: path.resolve(
        rootPath,
        "node_modules/scheduler/cjs/scheduler.development.js"
      ),
      targetPath: path.resolve(tempDevDir, "scheduler.js"),
    },
  };

  Object.keys(mapping).forEach((key) => {
    const { sourcePath, targetPath } = mapping[key];
    transformCjsToEsm(sourcePath, targetPath);
  });

  /**
   * 将 CommonJS 转换成 ES Module，部分三方库没有提供 ES Module 版本，比如React
   * @param {*} sourcePath
   * @param {*} targetPath
   */
  function transformCjsToEsm(sourcePath, targetPath) {
    const content = fs.readFileSync(sourcePath, "utf-8");
    const babel = require("@babel/core");

    // 转换CommonJS代码为esm
    const transformedCode = babel.transform(content, {
      plugins: ["transform-commonjs"],
    }).code;

    // 路径重写，将 require('react') 转换成 require('/@modules/react')
    // TODO: 两段代码合并
    const pathRewritedCode = babel.transform(transformedCode, {
      plugins: [customAliasPlugin],
    }).code;

    fs.writeFileSync(targetPath, pathRewritedCode);
  }
}

添加之后查看网络请求，可以看到已经成功请求到了 react.js 和 react-dom.js

看到控制台有报错，原因是在 App.js 中没有引入 React

React 自动引入

熟悉 React 的朋友都知道，在 React17 之前， 我们在使用 React 的时候，需要手动引入 React，原因是 JSX 语法会被转换成 React.createElement。

import React from "react";
function App() {
  return <div>hello world1</div>;
}

但是在 React17 之后，我们不需要手动引入 React 了, 有兴趣可以看看官网介绍, 因为 React 会自动注入到全局中，所以我们需要在 App.js 中添加 React 的引入

安装

yarn add  @babel/plugin-transform-react-jsx-development

我们在代码转化中添加自动引入的逻辑

const transformedCode = babel.transform(jsxCode, {
  plugins: [
    "@babel/plugin-transform-react-jsx-development", // 引入jsx
    customAliasPlugin,
  ],
}).code;

可以看到代码成功做了转化

接着是 import { jsxDEV as _jsxDEV } from "/@modules/react/jsx-dev-runtime";的处理

在原来的 mapping 中添加 jsx-dev-runtime 的引入

mapping = {
  react: {
    sourcePath: path.resolve(
      rootPath,
      "node_modules/react/cjs/react.development.js"
    ),
    targetPath: path.resolve(tempDevDir, "react.js"),
  },
  ["react/jsx-dev-runtime"]: {
    sourcePath: path.resolve(
      rootPath,
      "node_modules/react/cjs/react-jsx-dev-runtime.development.js"
    ),
    targetPath: path.resolve(tempDevDir, "jsx-dev-runtime.js"),
  },
};

可以看到 hello world1 已经成功渲染到页面上了

参考

本文首发于个人Github前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正

逍遥的编程笔记
关注
专栏目录
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
vite-plugin-pwa：Vite的零配置PWA
02-05
npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D 将其添加到vite.config.js // vite.config.js import { VitePWA } from 'vite-plugin-pwa' export default { plugins : [ VitePWA
vite-plugin-md：针对Vite的Markdown
02-04
vite-plugin-md 降价促销 将Markdown用作Vue组件 在Markdown中使用Vue组件 :information: Vite 2为0.2.x，Vite 1为0.1.x 安装 安装 npm i vite-plugin-md -D # yarn add vite-plugin-md -D 将其添加到vite.config...
vite-plugin-psvg:PSVG的Vite
05-24
npm i vite-plugin-psvg -D # yarn add vite-plugin-psvg -D 将其添加到vite.config.js // vite.config.js import PSVG from 'vite-plugin-psvg' export default { plugins : [ PSVG ( ) ] , } ; 然后将其...
vite-plugin-mpa:MPA（多页应用程序）
04-08
Vite-plugin-mpa 开箱即用的多页面应用程序，用于Vite，支持Vue2 / 3，React等动机访问本机支持多页，但必须配置rollupOptions.input 在访问开发人员时，必须为$projectRoot/src/pages/index/xxx.html打开localhost:...
web扩展
x737510的博客
10-10 533
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
计算机毕业设计 | SSM 校园线上订餐系统(附源码)
说书客
10-14 650
本系统基于SSM实现了餐馆点餐系统。项目功能（用户点餐子系统）：登录注册，选座，商品购买，我的订单等。（后台管理子系统）：用户管理，餐桌管理，菜品管理，菜系管理，订单管理等
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 186
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1080
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
一文区分SSTI 和 CSTI
zkaq7777777的博客
10-10 355
𝗦𝗲𝗿𝘃𝗲𝗿-𝘀𝗶𝗱𝗲 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗶𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 指可能发生使用服务器端模板引擎的 Web 应用程序。它涉及代码注入攻击，攻击者可以在服务器端模板中注入并执行恶意代码。𝗖𝗹𝗶𝗲𝗻𝘁 𝗦𝗶𝗱𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗜𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 是一个安全问题，攻击者的输入是注入页面并由客户端 JavaScript 库处理。TL;SSTI 允许在远程服务器上执行代码，而 CSTI 允许在受害者端【客户端】执行任意 JavaScript 代码。
Vue：点击图片在新的页面打开
MMF博客园
10-10 199
Vue：点击图片在新的页面打开
字节跳动青训营开始报名了！
窗外风景随心变幻
10-10 1838
青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生，旨在培养优秀且具有职业竞争力的开发工程师。本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向，在这个飞速发展的 AI 时代，我们将和豆包MarsCode 一起深入探索，在青训营的技术氛围中，学习 AI，使用 Al，高效写码~
9个微服务最佳实践
Tech My Life
10-06 615
7⃣领域驱动设计：以业务领域为中心，优化业务理解。9⃣微服务编排：协调和管理微服务，简化服务管理。8⃣微前端架构：前端独立开发，灵活性，可维护。6⃣无状态服务器：不存储状态，增强可伸缩性。1⃣分离数据存储：独立数据库，提升灵活性。2⃣代码成熟度一致：质量稳定，避免技术债务。4⃣单一职责原则：业务功能单一，简化维护。5⃣容器化部署：提高环境一致性，可移植。3⃣独立构建流程：独自构建，快速部署。
如何查看GB28181流媒体平台LiveGBS中对GB28181实时视频数据统计的负载信息
10-12 323
@目录1、负载信息2、负载信息说明3、会话列表查看3.1、会话列表4、停止会话5、搭建GB28181视频直播平台1、负载信息 实时展示直播、回放、播放、录像、H265、级联等使用数目 2、负载信息说明 直播：当前推流到平台的实时视频数目 回放：当前推流到平台的回放视频数目 播放：当前观看直播和回放的在线人数之和 录像：当前正在云端录像的通道数目 H265：当前推流到平台的视频中编码为H265...
前端高频面试题2024/9/22(偏项目问题--通用后台管理系统)
qq_46617150的博客
10-11 808
前端通过ts限制数据类型，后端通过joi限制数据类型这里的这个joi是对输入数据进行限制的中间件！！
vue-自定义指令
Kevin7_35Durant的博客
10-09 489
钩子函数inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。钩子函数参数。
纯前端如何实现批量下载功能呢?
tan_xiao_tan的博客
10-14 151
**需求:***在不依赖后端的情况下,前端需要独立实现批量下载,且下载的文件需统一放在一个文件夹中并压缩。html2canvas可以实现截图功能。FileSaver 保存文件到本地。JsPDF 可以将文件生成pdf。JSZip 可以压缩文件。
『气泡水』Web官网 案例赏析
ufrontend的博客
10-14 205
Schweppes，作为一家享誉全球的气泡水品牌，致力于与年轻消费者建立更紧密的联系，并提升品牌影响力。为此，其打造了一个充满创意和高度互动性的官网，利用前端技术和动画效果，将产品特性与用户浏览体验完美融合。1.创意定位网站以动态气泡为核心元素，模拟气泡水倒入杯中时的自然反应，为用户营造出一种沉浸式的浏览体验。设计上追求简约，通过文字、场景与产品的结合，及互动性的引入，让用户对产品有更直观的认知。2.设计理念。
JavaScript函数
最新发布
学无止境
10-14 488
和变量类似，函数必须先定义然后才能使用。使用 `function` 关键字定义函数。> function：函数、功能。
无法找到模块vite-plugin-gltf的声明文件
06-03
你可以新建一个名为vite-plugin-gltf.d.ts的文件，并在其中声明vite-plugin-gltf模块的类型。例如： ```typescript declare module 'vite-plugin-gltf'; ``` 这样就可以避免TypeScript编译器报出找不到vite-plugin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值