Vue 3 学习 五、Vite 模拟实现原理

最新推荐文章于 2024-09-04 09:57:27 发布
最新推荐文章于 2024-09-04 09:57:27 发布
阅读量3.1k 收藏 6
点赞数 1
分类专栏： # Vue 3 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/110648072
版权

Vite 核心功能

  • 静态 Web 服务器
  • 编译单文件组件
    • 拦截浏览器不识别的模块，并处理
  • HMR

当启动 Vite 的时候，首先会将当前项目目录作为静态 web 服务器的根目录。

静态 web 服务器会拦截部分请求，例如当请求单文件组件的时候会实时编译，以及处理其他浏览器不能识别的模块（非 JS 模块）。

通过 web socket 实现 HMR（暂不模拟）。

创建项目

首先创建一个基于 Vue 3 的项目，用于测试模拟的 vite-cli 工具。

可以使用 vite-app 快速创建：

npm init vite-app vue3-demo
cd vue3-demo
npm install

创建 vite-cli 目录

# 创建 vite 工具文件夹 vite-cli
mkdir vite-cli
# 进入目录
cd ./vite-cli
# npm 初始化
npm init -y

静态 Web 服务器

Vite 内部使用 Koa 开启静态 Web 服务器。

# 安装依赖，koa-send：静态文件处理的中间件
npm i koa koa-send

配置 bin 字段，默认执行的 js 文件的路径：

vite-cli/package.json：

{
  "name": "vite-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.13.0",
    "koa-send": "^5.0.1"
  }
}

添加 index.js 文件，因为要开发的是基于 Node 的命令行工具，需要在文件顶部配置运行 node 的位置。

使用koa开发静态文件服务器，默认返回根目录中的index.html

创建一个中间件，负责处理静态文件，默认加载当前目录下（运行该命令行工具的目录中的index.html）。

vite-cli/index.js：

#!/usr/bin/env node
// /index.js

const Koa = require('koa')
const send = require('koa-send')

// 创建实例
const app = new Koa()

// 1. 开启静态文件服务器
app.use(async (ctx, next) => {
  await send(ctx, ctx.path, {
    root: process.cwd(),
    index: 'index.html'
  })
  await next()
})

app.listen(3000)
console.log('Server running @ http://localhost:3000');

然后将 vite-cli 链接到 npm：

# vite-cli 根目录下运行
npm link

使用 vite-cli 运行 vue3-demo：

# 在 vue3-demo 根目录下运行
vite-cli

或者配置到 vue3-demo 的脚本中：

vue3-demo/package.json：

{
  "scripts": {
    "serve": "vite-cli",
    "dev": "vite",
    "build": "vite build"
  },
}

打开浏览器访问 http://localhost:3000

加载第三方模块失败

此时访问页面发现有个报错：Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

解析 vue 模块的时候失败，要求使用相对路径（"/", "./", or "../"）导入模块。

查看 main.js 源码：

在这里插入图片描述

在导入 vue 模块的时候，前面没有浏览器要求的相对路径地址（"/", "./", or "../"）。

这种方式的导入，期望的是从 node_modules 中加载模块，这是打包工具的默认行为，但是浏览器不支持。

接着查看 vite 中是如何处理的。

使用 vite 运行 vue3-demo 查看：

# vue3-demo目录下运行
npm run dev
# 当前3000端口被占用，web服务器端口分配为 3001

在这里插入图片描述

在这里插入图片描述

Vite 开启的 web 服务器在加载 main.js 时首先会处理第三方模块的 import 路径：vue => /@modules/vue.js

所以在服务器端要手动处理这个路径。

查看浏览器请求 main.js 的 Headers：

在这里插入图片描述

响应头 Response Headers 返回的 Content-Type 是 application/javascript，作用是告诉浏览器返回的文件是 JavaScript 文件。

所以要在 web 服务器输出之前，先判断一下当前返回的文件是否是 JS 文件。

如果是 JS 文件，再去处理里面第三方模块的路径。

然后在请求 /@modules/vue.js 时处理这个不存在的路径，去 node_modules 中寻找对应的文件。

所以下面要创建两个中间件，作用分别是：

  1. 修改第三方模块的 import 路径，改为 /@modules/[模块名]（为了方便不添加.js后缀）
  2. 判断请求路径中是否包含 /@modules/[模块名]，如果有的话，去 node_modules 中加载对应的模块

修改第三方模块的路径

vite-cli/index.js：

#!/usr/bin/env node

const Koa = require('koa')
const send = require('koa-send')

// 创建实例
const app = new Koa()

// 流转化成字符串
// stream 读取的流
// 读取流是一个异步的过程,所以要返回一个 Promise
const streamToString = stream =>
  new Promise((resolve, reject) => {
    // chunks 存储读取到的 Buffer
    const chunks = []

    // 监听读取到的 Buffer
    stream.on('data', chunk => chunks.push(chunk))

    // 监听读取完毕,将 Buffer 转化成字符串
    stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))

    // 监听读取失败
    stream.on('error', reject)
  })

// 1. 开启静态文件服务器
app.use(async (ctx, next) => {/* ... */})

// 2. 修改第三方模块的路径
app.use(async (ctx, next) => {
  // 判断是否是 JS 文件
  if (ctx.type === 'application/javascript') {
    // ctx.body 是返回给浏览器的 JS 文件,是一个流,要转化成字符串处理
    const contents = await streamToString(ctx.body)
    // 替换路径并重新赋值 ctx.body
    // 替换 `from '` 为 `from '/@modules/`
    ctx.body = contents.replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
  }
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重启服务器：

# vue3-demo 项目下重新运行
npm run serve

在这里插入图片描述

加载第三方模块

vite-cli/index.js：

#!/usr/bin/env node

const path = require('path')
const Koa = require('koa')
const send = require('koa-send')

// 创建实例
const app = new Koa()

// 流转化成字符串
// stream 读取的流
// 读取流是一个异步的过程,所以要返回一个 Promise
const streamToString = stream =>
  new Promise((resolve, reject) => {/* ... */}})

// 3. 加载第三方模块
// 在处理静态之前创建的中间件
app.use(async (ctx, next) => {
  // 判断路径是否是以 `/@odules/` 开头
  if (ctx.path.startsWith('/@modules/')) {
    // 截取模块名称
    const moduleName = ctx.path.substr(10)

    // 获取模块的入口文件(ESM模块的入口文件)
    // 先找到这个模块的 package.json,再获取module字段的值
    const pkgPath = path.join(process.cwd(), 'node_modules', moduleName, 'package.json')
    const pkg = require(pkgPath)
    ctx.path = path.join('/node_modules', moduleName, pkg.module)
  }
  await next()
})

// 1. 开启静态文件服务器
app.use(async (ctx, next) => {/* ... */}})

// 2. 修改第三方模块的路径
app.use(async (ctx, next) => {/* ... */}})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重启服务。

在这里插入图片描述

查看控制台报错，有两个浏览器不能识别的模块加载失败 App.vue 和 index.css。

在这里插入图片描述

编译单文件组件

Vite 编译单文件组件

浏览器只能处理 JS 模块，所以通过 import 加载的其他模块都需要在服务器端处理。

当请求单文件组件的时候，需要在服务器上把单文件组件编译成 JS 模块，然后返回给浏览器。

查看 vite 如何实现：

在这里插入图片描述

在这里插入图片描述

Vite 中处理单文件组件会发送两次请求：

  1. 第一次请求把单文件组件编译成对象
  2. 第二次请求编译单文件组件的模板，返回一个render函数，并挂载到第一次请求编译的对象的render属性上

vite-cli 模拟实现第一次请求

安装 vue 3 编译单文件组件的模块 compiler-sfc

npm i @vue/compiler-sfc

#!/usr/bin/env node

const path = require('path')
const { Readable } = require('stream')
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC = require('@vue/compiler-sfc')

// 创建实例
const app = new Koa()

// 流转化成字符串
// stream 读取的流
// 读取流是一个异步的过程,所以要返回一个 Promise
const streamToString = stream =>
  new Promise((resolve, reject) => {/* ... */}})

// 字符串转化成流
const stringToStream = text => {
  const stream = new Readable()
  stream.push(text)
  // 标识 stream 已写完
  stream.push(null)
  return stream
}

// 3. 加载第三方模块
// 在处理静态之前创建的中间件
app.use(async (ctx, next) => {/* ... */}})

// 1. 开启静态文件服务器
app.use(async (ctx, next) => {/* ... */}})

// 4. 处理单文件组件
// 在获取文件之后,处理第三方模块之前
app.use(async (ctx, next) => {
  // 判断是否是单文件组件
  if (ctx.path.endsWith('.vue')) {
    const contents = await streamToString(ctx.body)
    // Vue 2 的 compiler 返回一个 AST 对象
    // Vue 3 的 compiler 返回一个包含 descriptor 和 errors 的对象
    const { descriptor } = compilerSFC.parse(contents)

    let code
    if (!ctx.query.type) {
      // 第一次请求
      code = descriptor.script.content
      // console.log(code)

      // 改造code
      code = code.replace(/export\s+default\s+/g, 'const __script = ')

      // 拼接代码
      code += `
      import {render as __render} from "${ctx.path}?type=template"
      __script.render = __render
      export default __script
      `
    }
    // 告诉浏览器以 JS 方式识别该返回
    ctx.type = 'application/javascript'

    // 将code转换成流输出给浏览器
    ctx.body = stringToStream(code)
  }
  await next()
})

// 2. 修改第三方模块的路径
app.use(async (ctx, next) => {/* ... */}})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重启服务。

在这里插入图片描述

App.vue 编译成功，并发起第二次请求，但是第二次请求还没处理，所以没有返回内容。

vite-cli 模拟实现第二次请求

#!/usr/bin/env node

const path = require('path')
const { Readable } = require('stream')
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC = require('@vue/compiler-sfc')

// 创建实例
const app = new Koa()

// 流转化成字符串
// stream 读取的流
// 读取流是一个异步的过程,所以要返回一个 Promise
const streamToString = stream =>
  new Promise((resolve, reject) => {/* ... */}})

// 字符串转化成流
const stringToStream = text => {
  const stream = new Readable()
  stream.push(text)
  // 标识 stream 已写完
  stream.push(null)
  return stream
}

// 3. 加载第三方模块
// 在处理静态之前创建的中间件
app.use(async (ctx, next) => {/* ... */}})

// 1. 开启静态文件服务器
app.use(async (ctx, next) => {/* ... */}})

// 4. 处理单文件组件
// 在获取文件之后,处理第三方模块之前
app.use(async (ctx, next) => {
  // 判断是否是单文件组件
  if (ctx.path.endsWith('.vue')) {
    const contents = await streamToString(ctx.body)
    // Vue 2 的 compiler 返回一个 AST 对象
    // Vue 3 的 compiler 返回一个包含 descriptor 和 errors 的对象
    const { descriptor } = compilerSFC.parse(contents)

    let code
    if (!ctx.query.type) {
      // 第一次请求
      code = descriptor.script.content
      // console.log(code)

      // 改造code
      code = code.replace(/export\s+default\s+/g, 'const __script = ')

      // 拼接代码
      code += `
      import {render as __render} from "${ctx.path}?type=template"
      __script.render = __render
      export default __script
      `
    } else if (ctx.query.type === 'template') {
      // 第二次请求
      const templateRender = compilerSFC.compileTemplate({ source: descriptor.template.content })
      code = templateRender.code
    }

    // 告诉浏览器以 JS 方式识别该返回
    ctx.type = 'application/javascript'

    // 将code转换成流输出给浏览器
    ctx.body = stringToStream(code)
  }
  await next()
})

// 2. 修改第三方模块的路径
app.use(async (ctx, next) => {/* ... */}})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重启服务。

在这里插入图片描述

替换vue模块中的环境变量

当文件组件已经正常编译，但页面还是没有正常显示。

原因有两个：

  1. 其他浏览器不能识别的模块还没有处理
    1. main.js 中加载的 ./index.css
    2. App.vue 中使用的图片 ./assets/logo.png

可以暂时注释这些模块来解决。

  1. vue 模块中使用了环境变量

注释掉其他模块，刷新页面会发现一个报错：

在这里插入图片描述

报错文件是 @vue/shared，查看源码：

在这里插入图片描述

源码中使用了 process.env.NODE_ENV。

当前代码是在浏览器环境下执行的，process是 node 环境的对象，浏览器环境没有这个对象，所以报错。

这段源码的作用是让打包工具根据环境变量分别进行生产环境或者开发环境的打包操作。

但是现在没有用打包工具，所以这句代码没有被处理，直接返回给了浏览器。

所以应该在服务器处理一下，在返回 JS 模块之前，应该把 JS 模块中所有process.env.NODE_ENV 都替换成 development（因为当前是开发环境下）。

#!/usr/bin/env node

const path = require('path')
const { Readable } = require('stream')
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC = require('@vue/compiler-sfc')

// 创建实例
const app = new Koa()

// 流转化成字符串
// stream 读取的流
// 读取流是一个异步的过程,所以要返回一个 Promise
const streamToString = stream =>
 new Promise((resolve, reject) => {/* ... */})

// 字符串转化成流
const stringToStream = text => {/* ... */}

// 3. 加载第三方模块
// 在处理静态之前创建的中间件
app.use(async (ctx, next) => {/* ... */})

// 1. 开启静态文件服务器
app.use(async (ctx, next) => {/* ... */})

// 4. 处理单文件组件
// 在获取文件之后,处理第三方模块之前
app.use(async (ctx, next) => {/* ... */})

// 2. 修改第三方模块的路径
app.use(async (ctx, next) => {
 // 判断是否是 JS 文件
 if (ctx.type === 'application/javascript') {
   // ctx.body 是返回给浏览器的 JS 文件,是一个流,要转化成字符串处理
   const contents = await streamToString(ctx.body)
   // 替换路径并重新赋值 ctx.body
   // 替换 `from '` 为 `from '/@modules/`
   ctx.body = contents
     .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
     // 继续替换 process 对象
     .replace(/process\.env\.NODE_ENV/g, '"development"')

 }
})

app.listen(3000)
console.log('Server running @ http://localhost:3000')

重启服务，App.vue 文件的内容正常显示。

皮蛋很白
关注
专栏目录
vue3.0 Vite 实现
qt的博客
01-25 582
Vite 介绍 概念： Vite是一个面向现代浏览器的一个更轻，更快的web应用开发工具 它基于ECMACript标准原生模块系统(ES Module)中的type=“mudole” 特性实现 Vite 项目依赖 Vite @vue/compiler-sfc : 编译.vue结尾的单文件组件 基础使用 vite serve vite build 使用serve时候，会开启一个web服务器，在开启服务器，不需要像vue-cli进行编译文件，启动非常快 vite serve vue-cli s
【安卓 IOS白屏问题】vite+js+vue3
youknow156的博客
09-06 692
其实就是在升级过程中会有一些问题 微信浏览会有一些缓存，导致用户断言 失败无法就失败了一半跟 清空缓存或者重新登录就能解决这个问题 这肯定不是我们想要的 这里再贴一段代码打包时会有会使用一个默认模板 我们定义为index.html 复制代码替换你的index.html 模板-- 设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。-->-- 设定禁止浏览器从本地机的缓存中调阅页面内容 -->-- 清除缓存，再次访问这个网址要重新下载 -->
实现一个vue3相对完善的响应式系统
qq_24986271的博客
11-23 348
watch，computed 等。
Vue3一些笔记
qq_73035708的博客
06-02 368
vue3相关语法、与vue2的差别，动态添加路由等
Vue3 + Ts + Vite项目 websoket封装使用
最新发布
做笔记/记录遇到的前端bug
09-04 634
10分钟带你搞定websoket在Vue3+Ts项目中的使用
Vue3.0语法重点API整理一
xiaomao_wxj的博客
02-28 1479
vue3.0重点API整理
深入理解vue3 响应式数据
weixin_63212264的博客
11-17 307
之前研究了vue的reactive方法，简写了vue3的响应式的核心原理，然后萌生了编写简易版vue3实现的想法。查阅相关资料后，来使用原生js环境模vue3的响应式数据的核心api实现。这个例子很好理解，reative 这个方法创建对象后，能去监听数据的get/set。不管是vue2还是vue3, 最核心的还是，而effect函数可以说是它的核心实现了。
前端学习第九站——Vue3基础篇
qq_59212867的博客
02-22 4704
Vue3基本用法
Vue3+Vite 结合Cesium实现2D/3D图形绘制
资源摘要信息:"vue3+vite 实现cesium绘制图形" 知识点: 1. Vue.js 3: Vue.js 是一个构建用户界面的渐进式JavaScript框架。Vue.js 3 是该框架的最新主要版本，引入了 Composition API 以更灵活地组织和重用代码。...
vue3学习—vite原理
xun__xing的博客
03-25 1698
vue3学习—vite原理一、vite原理1、webpack2、vite3、webpack和vite的比较4、提问：vite中能使用commonJs 一、vite原理 要了解vite首先从webpack讲起，具体的webpack可以翻阅我的笔记。下面我们简单回忆下webpack的知识。 1、webpack 以如下示例： // index.js console.log("index"); require("./a"); require("./b"); // a.js require("./b"); con
Vue3+Vant开发：首页功能实现
程序员老茶的博客
04-23 1653
Vue3+Vant开发：首页功能实现
vue3 ref响应式原理
gw20192019的博客
11-28 1440
vue3响应式 relative（）实现响应式原理是用proxy拦截对象中属性的添加 读写 删除 在用reflect反射 对被代理的源对象的属性进行操作（数据劫持） ref原理是通过object.defineproperty的get和set实现响应式（数据劫持） Ref中的数据会被转换成一个ref引用对象，引用对象里面有value 在模板里会自动解析ref引用对象的value，所以在模板里不用写点value，Ref会把不同的数据类型转换为不同的对象，比如对象就会转换成proxy对象。 其原
【前端学习】Vue3新增特性
SDUzzy的博客
08-31 723
Vue3相对Vue2新增的特性 合成型API(Composition) 1、data Vue2采用了选项类型API(Options API)，而Vue3采用的是合成型API。 旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。 import { reactive } from 'vue' export default {
Vue 3 迁移策略笔记—— 第30节：新增功能——Teleport
Jay的博客
04-18 480
前言 本笔记主要基于官方文档《Vue 3 教程-Teleort》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。 什么是 Teleport ? Teleport 是 Vue 3.x 新增自定义元素，借助 Teleport 可以控制 Teleport 内部的内容挂载到具体的元素中。 场景模拟 我们先看这样的一个场景 在一个多层嵌套的组件中，我们构建了一个模态框。我们想要这个模态框相对于最顶层的元素显示，该怎么做呢？
使用vue3简单实现WebSocket通信
热门推荐
weixin_44096999的博客
06-14 1万+
WebSocket是一种在客户端和服务器之间进行双向通信的网络协议,使用vue3+ts实现websocket的实时通信
vite vue3 WebSocket 使用protobuf
qq_52838665的博客
04-11 494
vite vue3 WebSocket 使用proto buffer。
Vue 3 学习 四、Vite 介绍
皮蛋很白的博客
12-04 3121
概念 Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具 它基于 ECMAScript 标准的原生模块系统（ES Modules）实现 目的 它的出现是为了解决 webpack 在开发阶段使用 webpack-dev-server 冷启动时间过长，以及 webpack HMR 热更新反应速度慢的问题。 使用 Vite 创建的项目，就是一个普通的 Vue 3 的应用。项目基于 Vue CLI 创建的项目少了很多的配置文件和依赖。 项目依赖 Vite 目前只支持 Vue 3.0
【vue.js 3.0】之 Vite
weixin_37883657的博客
03-23 410
Vite 概念 Vite 是一个面向现代浏览器的一个更轻、更快的Web 应用开发工具 它基于 ECMAScript 标准原生模块系统（ES Modules）实现 Vite 项目依赖 Vite @vue/compiler-sfc 基础使用 vite serve vite build serve HMR 热加载 Vite HMR 立即编译当前所修改的文件 Webpack HMR 会自动以这个文件为日寇重写 build 一次，所有的涉及到的依赖...
Vue3快速上手笔记
为技术发烧而生
12-16 1540
尚硅谷张天禹老师关于Vue3的课程笔记，总结了老师课程讲的内容以及增加了部分完整代码截图，分享给学习Vue的小伙伴
vue3项目中全局引入websocket
qq_49017797的博客
06-12 651
2.main.js 引入下面内容。3. 在需要的页面如何使用。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值