模拟 Vite

已于 2022-08-30 16:24:06 修改
阅读量452 收藏
点赞数
分类专栏： 大前端学习笔记 Vue3 前端开发 文章标签： 前端 javascript json
于 2022-08-22 16:04:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32090185/article/details/126467842
版权

模拟 Vite

Vite 核心功能

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

Vite 工作步骤

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

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

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

创建 Vue3.x 项目

用于测试我们模拟的 vite 工具

npm

npm init vite-app vite-test-demo
cd vite-test-demo
npm i

yarn

yarn create vite-app vite-test-demo
cd vite-test-demo
yarn

初始化 wuner-vite-cli

mkdir wuner-vite-cli
cd wuner-vite-cli
echo '' >index.js
yarn init -y

安装依赖

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

koa-send：静态文件处理的中间件。

yarn add koa koa-send

配置

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

package.json

{
  "name": "wuner-vite-cli",
  "version": "1.0.0",
  "main": "index.js",
  "bin": "index.js",
  "license": "MIT",
  "dependencies": {
    "koa": "^2.13.0",
    "koa-send": "^5.0.1"
  }
}

接单

小编承接外包，有意者可加
QQ：1944300940
在这里插入图片描述

微信号：wxid_g8o2y9ninzpp12
在这里插入图片描述

静态 web 服务器

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

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

index.js

#!/usr/bin/env node

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');

link

wuner-vite-cli 根目录下运行

# npm
npm link
# yarn
yarn link

测试

在 vite-test-demo 根目录下运行

wuner-vite-cli

使用浏览器访问 http://localhost:3000

这时你将看到报错，如下图

在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6VZoLujv-1661155081503)(./imgs/2.png)]

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

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

vite 解决方案

使用 vite 运行 vite-test-demo 查看：

vite

在这里插入图片描述
在这里插入图片描述

通过查看 main.js 的 http 请求，我们可以看出 Vite 开启的 web 服务器在加载 main.js 时首先会处理第三方模块的 import 路径：vue => /@modules/vue.js；响应头 Response Headers 返回的 Content-Type 是 application/javascript，作用是告诉浏览器返回的文件是 JavaScript 文件。

所以要在 web 服务器输出之前，先判断一下当前返回的文件是否是 JS 文件。 如果是 JS 文件，再去处理里面第三方模块的路径。 然后在请求 /@modules/vue.js 时处理这个不存在的路径，去 node_modules 中寻找对应的文件。

修改第三方模块的路径

#!/usr/bin/env node

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

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

/**
 * 流转化成字符串
 * @param stream
 * @returns {Promise}
 */
const streamToString = (stream) =>
  // 读取流是一个异步的过程,所以要返回一个 Promise
  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) => {
  await send(ctx, ctx.path, {
    root: process.cwd(),
    index: 'index.html',
  });
  await 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');

测试

重新运行脚本测试

wuner-vite-cli

在这里插入图片描述

如上图所示，我们已经成功修改了 vue 模块加载路径，但是浏览器不识别，我们需要在服务器去加载第三方模块。

加载第三方模块

#!/usr/bin/env node

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

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

/**
 * 流转化成字符串
 * @param stream
 * @returns {Promise}
 */
const streamToString = (stream) =>
  // 读取流是一个异步的过程,所以要返回一个 Promise
  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);
  });

// 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');

测试

重新运行脚本测试
在这里插入图片描述

如上图所示，vue 模块已成功被加载到，但是有两个浏览器不能识别的模块加载失败 App.vue 和 index.css

本次只模拟 js 类型处理，我们将注释 css 与 img 引用

Vite 解决方案

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

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

在这里插入图片描述
在这里插入图片描述

如上图所示，Vite 中处理单文件组件会发送两次请求：

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

编译 vue 单文件组件

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

#npm
npm i @vue/compiler-sfc
#yarn
yarn add @vue/compiler-sfc

#!/usr/bin/env node

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

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

/**
 * 流转化成字符串
 * @param stream
 * @returns {Promise}
 */
const streamToString = (stream) =>...

/**
 * 字符串转化成流
 * @param text
 * @returns {*}
 */
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;

      // 改造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');

测试

重新运行脚本测试

在这里插入图片描述

如上图所示，源码中使用了 process.env.NODE_ENV。

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

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

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

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

替换 vue 模块中的环境变量

#!/usr/bin/env node

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

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

/**
 * 流转化成字符串
 * @param stream
 * @returns {Promise}
 */
const streamToString = (stream) =>...

/**
 * 字符串转化成流
 * @param text
 * @returns {*}
 */
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');

测试

重新运行脚本测试

在这里插入图片描述

如上图所示，我们已经可以正常显示页面了

源码

白驹过隙时光荏苒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
通过模拟Vite一起深入其工作原理
前端高薪进击手记
08-04 1055
浅谈了一下vite的实现原理
初识Vite
桃子彩虹无限的博客
08-24 420
一起源： 1.
vite-test
03-30
vite-test
vite test
JunChow
05-13 671
Yarn https://yarn.bootcss.com/ Yarn是一个由Facebook共享的JavaScript包管理器，用于解决团队使用NPM面临的少数问题： 安装时无法保证速度和一致性 安全问题，NPM安装时允许运行代码。 Yarn同时是从NPM注册源获取模块的新CLI客户端 安装Yarn 使用NPM全局安装Yarn $ node -v v14.16.0 $ npm -v...
Vite的虚拟模块插件-JavaScript开发
05-26
vite-plugin-virtual带HMR插件的虚拟模块，用于Vite入门安装Vite插件虚拟：$ npm install -D vite-plugin-virtual添加到vite-plugin-virtual带HMR插件的虚拟模块，用于Vite入门，安装Vite虚拟插件： $ npm install -D vite-plugin-virtual添加到您的vite.config.js：从“ vite-plugin-virtual”导入{虚拟}导出默认{插件：[virtual（{'virtual：module'：`export default { hello：'world'}`，'virtual：config'：{hello：'world'}}）]}在您的源代码中，您现在可以导入虚拟模块，从'virtual：config'console.log（obj）导入obj。
使用Vite虚拟模块功能重写多语言和多皮肤插件
Coding home - 漂流瓶jz
04-21 895
虚拟模块实际上是Vite背后的打包器Rollup的功能。通过虚拟模块，我们可以传入一些编译时信息。通过虚拟模块，我开发了两个vite插件，集成了多语言多皮肤文件等资源的快速导入。
vite-test-example:使用Vite设置测试的示例
05-17
vite-test-example 测试的目录结构和命令与@vue/cli创建的项目相同。 端到端测试 该存储库以赛普拉斯为例，说明了如何使用Vite设置端到端测试。 要尝试，请运行： yarn test:e2e 使用Vite运行端到端测试与其他捆绑软件没有什么不同： 捆绑该应用以进行生产； 启动静态HTTP服务器； 从测试框架运行命令。 Vite提供了一个内置的静态HTTP服务器来预览构建结果。 我们可以通过运行vite preview （或yarn serve ）来启动它。 该预览服务器的默认URL为http://localhost:5000/ 。 因此，我们还将cypress.json的baseUrl选项设置为此URL。 vite preview提供了dist文件夹的内容，该内容是由vite build命令生成的。 因此，我们向package.json的script
vite-plugin-mockit:快速插件模拟
05-09
vite的本地模拟数据功能，支持vite 1.x和vite 2.x 简单的写作（express.js风格） 观看文件更改 自动重装模拟服务器 支持cjs样式模块 安装 yarn add vite-plugin-mockit 示例应用 用法 编写一个入口文件。 例如./...
vite+vue3使用模块化批量发布Mockjs接口
03-29
综上所述，"vite+vue3使用模块化批量发布Mockjs接口"是一个全面的前端开发流程，涉及到Vite的配置、Vue3的组件开发以及Mockjs的接口模拟，旨在提供一个高效、便捷的开发环境，同时保持代码的清晰结构和良好的可维护...
[vite + jest] import worker 测试报错的解决方案
qq_42464004的博客
02-21 1069
jest 报错无法解析 import 'xxx?worker' 下述修改只能解决 import 报错问题，实际上 worker 相关的代码还是不能使用的 修改配置如下： 新建 jest_resolver.js const url = require('url') module.exports = (request, options) => { // Remove any query parameters in the request path // (e.g. ?worker, whic
vite+vue3中使用mock模拟数据
liguoyuan819的博客
05-14 5985
1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置vite-plugin-mock使用方式 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { viteMockServe } from 'vite-plugin-mock' // https://vitej
虚拟模块在前端开发中的应用与示例
Lee Chen的博客
05-08 635
虚拟模块是一种在构建工具（如 Vite）中动态生成的模块，它们在编译阶段被构建工具生成，但在运行时表现得像普通的 JavaScript 模块一样。虚拟模块允许开发者创建具有动态生成内容的模块，实现更灵活的编程模式。
react + vite +testing-library 构建单元测试
weixin_37764929的博客
06-15 1024
业务复杂多变迭代快速，加上编写单测其实是耗费一定时间去做的，可能很多人认为编写单元测试是一件吃力不讨好的事儿，不会在项目中主动的去做单元测试，一两年前笔者也是这样的一种心态，对于单测嗤之以鼻，但是随着看的书多了，学习的东西多了，明白了单测可有有效的保证我们一些核心功能的正确性，同样可以反推我们的设计一些通用功能是否全面，再者也可以在我们改动一些功能后，校验原有功能的正确性，说这么多，还需要大家自己写起来单测，一个东西好不好，只有用起来了才知道，在vite下配置jest单测代码一上传至git，有兴趣的朋友，可
vite（vue3+ts）配置开发、测试、生产环境
热门推荐
LuoYi_ly_的博客
08-18 1万+
关于vite配置开发、测试、生产环境的记录。
vue3（vite）配置环境变量
最新发布
weixin_55049839的博客
08-02 976
一般在开发时候最常用到(development)开发环境、(production)生产环境、(test)测试环境。在vue3根目录创建三个文件，分别为：.env.development 、.env.production 、.env.test
搭建 vite + vue3 项目
halo1416的博客
01-27 8799
一、介绍 该文章主要通过 vite + vue3 + vue-router4 + vuex4 + Element Plus + axios + mockjs 搭建项目。 二、通过vite创建项目 1. 通过vite创建 vue+ts 项目 **注意：**经过我的测试，使用cnpm create vite时不能自定义项目名称；所以推荐使用 npm 或者 yarn // 创建项目 => vite-test yarn create vite // 进入 vite-test cd vite-test //
使用Vite搭建vue3.0 + Naive UI 项目
James_liPeng的博客
06-13 5587
使用Vite搭建vue3.0项目1. 使用NPM安装2. 安装2.1 输入项目名称选择要创建的框架（我们选择Vue）2.2 选择vue-ts 如下图所示2.3 按照指示进入创建的目录结构查看2.4 安装依赖2.5 启动2.6 启动成功3. 安装Naive UI3.1 使用webstrom3.2 安装Naive UI3.3 新建测试文件Test3.4 按需引入3.5 将Test组件使用到首页3.6 查看效果 1. 使用NPM安装 npm init @vitejs/app 效果如下图： 2. 安装 2.1 输
vue3+vite项目中搭建vitest测试环境
wangyuiba1314的博客
09-28 1670
如何在vue3+ts+vite的项目中，集成vitest。这篇文章帮你快速搞定
手把手教你使用vite打包自己的js代码包并推送到npm
BDawn的专栏
02-24 3903
手把手教你使用vite打包编译代码库，并上传到npm，然后测试使用
vue vite mock
12-20
Vue Vite Mock是一个用于在Vue Vite项目中进行模拟数据的工具。下面是使用Vue Vite Mock的步骤： 1. 首先，安装`mockjs`和`vite-plugin-mock`依赖： ```shell npm i mockjs vite-plugin-mock -D ``` 2. 在`vite.config.ts`文件中进行配置，引入`viteMockServe`并设置`mockPath`： ```javascript import { defineConfig } from 'vite' import viteMockServe from 'vite-plugin-mock' export default defineConfig({ // other configurations... plugins: [ // other plugins... viteMockServe({ mockPath: 'mock', // 设置mock文件夹的路径 }), ], }) ``` 3. 在项目根目录下创建一个名为`mock`的文件夹。 4. 在`mock`文件夹中创建一个名为`index.ts`的文件，并编写模拟接口数据的代码。例如： ```typescript import { MockMethod } from 'vite-plugin-mock' import test from './data/test' export default [ { url: "/api/test", method: 'get', response: () => { return { code: 200, result: test } }, } ] as MockMethod[] ``` 5. 在Vue组件中使用模拟数据。例如，在一个使用`<script setup>`的Vue组件中，可以使用`axios`发送请求并获取模拟数据： ```vue <script setup lang="ts"> import { ref } from "vue"; const t = ref<T>(); interface T { no: number; title: string; } axios({ method: 'GET', url: "/api/test" }) .then(res => { t.value = res.data.result; }) </script> ``` 这样，你就可以在Vue Vite项目中使用Vue Vite Mock进行模拟数据了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白驹过隙时光荏苒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值