AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vite原理之解析.vue文件

2022-07-03 990
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
全局流量管理 GTM，标准版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
云解析 DNS，旗舰版 1个月
简介： vite就是在本地启用了一个http服务器，然后将本地的文件通过浏览器的请求将本地的文件返回到浏览器；当然其中会有大量的解析，用于将文件内容解析为浏览器可以理解的内容

据说可以掌握的知识

  1. node express框架
  2. vue3
  3. ast树
  4. render函数
  5. 正则
  6. sfc
  7. esm模块

我的理解

按原文来讲，vite就是在本地启用了一个http服务器，然后将本地的文件通过浏览器的请求将本地的文件返回到浏览器；当然其中会有大量的解析，用于将文件内容解析为浏览器可以理解的内容

1. 依赖

"express": "^4.18.1", // 启动服务器
"vue": "^3.2.37" //处理和解析vue模板

2. 初始化文件，安装依赖

...略

3. 搭建服务器读取模板

3.1 启动文件server.js

const express = require("express")
var app = express()
const fs = require("fs")
const path = require("path")
const port = "3000"

app.get("/", (req, res, next)=>{
  //响应文本类型
  res.setHeader("content-type", "text/html")
  res.send(fs.readFileSync(path.resolve(__dirname, "./src/index.html")))
  res.end()
})

app.listen(port, ()=>{
  console.log(`the server is listen on ${port}`);
})

3.2 html模板文件src/index.html

<html>
<body>
  <div id="app">APP</div>
</body>

3.2 启动

node .server

3.3 效果

viteDemo-http预览.jpg

viteDemo-http预览.jpg

4. 读取vue文件

4.1 使用render函数读取

先使用vue的render函数来读取

  1. 新建 /src/index.js文件
import { createApp, h } from "vue";

createApp({
  render() {
    return h('div', {color: '#f00'}, "hello")
  }
})
.mount("#app")
  1. 修改server.js，以支持解析解析读取.js文件
const express = require("express")
var app = express()

const fs = require("fs")
const port = "3000"

app.get("/", (req, res, next)=>{
  res.setHeader("content-type", "text/html")
  res.send(fs.readFileSync("./src/index.html"))
  res.end()
})

app.get(/(.*)\.js$/, (req, res, next)=>{
  console.log(req.url, path.resolve(__dirname, "./src/"+ req.url));
  const p = fs.readFileSync(path.resolve(__dirname, "./src/"+ req.url), "utf-8");
  res.setHeader("content-type", "text/javascript")
  res.send(p)  
  res.end()
})
  1. 查看预览效果：

vite-vue-h函数预览，解析页面空白.png

vite-vue-h函数预览，解析页面空白.png

  1. 导致这个的原因是因为没法处理from 'vue',需要对/src/server.js进行一下改造：
app.get(/(.*)\.js$/, (req, res, next)=>{
  console.log(req.url, path.resolve(__dirname, "./src/"+ req.url));
  const p = fs.readFileSync(path.resolve(__dirname, "./src/"+ req.url), "utf-8");
  res.setHeader("content-type", "text/javascript")
-  res.send(p)  
+  res.send(reWritePath(p))
  res.end()
})

app.get(/^\/@module/, (req, res, next)=>{
  console.log(req.url, req.url.slice(9));
  # 将最终文件指向/node_modules/vue/package.json里的module配置
  const moduleFolder = path.resolve(__dirname, `./node_modules/${req.url.slice(9)}`)
  const modulePackageContent = require(moduleFolder+"/package.json").module
  const finalModulePath = path.join(moduleFolder, modulePackageContent)
  console.log("finalModulePath: ", finalModulePath);
  res.setHeader("content-type", "text/javascript")
  res.send(reWritePath(fs.readFileSync(finalModulePath, "utf-8")))
  res.end()
})

# 处理 import from "vue" 导出，将其转换成可识别路径
function reWritePath(content) {
  let reg = / from ['"](.*)['"]/g
  return content.replace(reg, (s1, s2)=>{
    console.log(s1, " ", s2);
    if(s2.startsWith(".") || s2.startsWith("./") || s2.startsWith("../")){
      return s1
    }else {
      return `from '/@module/${s2}'`
    }
  })
}
  1. 修改模板文件/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js" type="module"></script>
</body>
</html>
  1. 预览效果

vite-vue-h函数预览.png
vite-vue-h函数预览.png

4.2 那么如何成功读取.vue文件，并将其渲染到浏览器页面呢？

这就需要用到改造/src/index文件

1. 新建/src/app.vue文件

<template>
  {{title}}
</template>
<script>
import {ref} from "vue"
export default {
  setup() {
    const title = ref("hello")
    return {
      title
    }
  }
}
</script>

<style>
*{
  color:#f00;
}
</style>

2. 修改/src/index.js文件

import { createApp} from "vue";
import app from "./app.vue"

createApp(app)
.mount("#app")

3. 预览报错

vite-vue-文件不识别.png

vite-vue-文件不识别.png

4. 这个错误是不识别vue后缀的请求导致的

4.1 解决方法就是添加处理以vue为后缀的请求

  1. 修改/server.js
app.get(/(.*)\.vue$/, (req, res, next)=>{
  // exclude request with ? which is template or style requestion
  const questUrl = req.url
  console.log("vue: ", req.url, path.resolve(__dirname, `./src/${questUrl}`));
  const content = fs.readFileSync(path.resolve(__dirname, `./src/${questUrl}`), 'utf-8')
  const contentAST = compilerSFC.parse(reWritePath(content))
  console.log("ast: ", contentAST);
  console.log("query: ", req.query);
})

此时，会返回一串ast树代码，然后query是个空对象
vite-vue-astTree.png

vite-vue-astTree.png

  1. 继续修改/server.js
app.get(/(.*)\.vue$/, (req, res, next)=>{
  // exclude request with ? which is template or style requestion
  const questUrl = req.url
  console.log("vue: ", req.url, path.resolve(__dirname, `./src/${questUrl}`));
  const content = fs.readFileSync(path.resolve(__dirname, `./src/${questUrl}`), 'utf-8')
  const contentAST = compilerSFC.parse(reWritePath(content))
  console.log("ast: ", contentAST);
  console.log("query: ", req.query);
  const scriptContent = contentAST.descriptor.script.content
  const script = scriptContent.replace("export default", "const _script = ")
  res.setHeader("content-type", "text/javascript")
  res.send(`
    ${reWritePath(script)}
    import {render as _render} from '${req.url}?type=template';
    import '${req.url}?type=style'
    _script.render = _render
    export default _script
  `)
  res.end()
})

通过compilerSFC插件，将.vue文件解析为ast树；从中的script字段的content获取到js内容；并且再次请求app.vue?type=template（请求模板内容）和app.vue?type=style（请求样式）；将export default替换为const _script，并导出

  1. 预览效果：

vite-vue-v文件请求.png

vite-vue-v文件请求.png

  1. 请求返回内容

vite-vue-vue后缀请求返回内容.png

vite-vue-vue后缀请求返回内容.png

4.2 处理app.vue?type=template和app.vue?type=style请求，继续修改/src/server文件

app.get(/(.*)\.vue$/, (req, res, next)=>{
  // exclude request with ? which is template or style requestion
  const questUrl = req.url.split('?')[0]
  console.log("vue: ", req.url, path.resolve(__dirname, `./src/${questUrl}`));
  const content = fs.readFileSync(path.resolve(__dirname, `./src/${questUrl}`), 'utf-8')
  const contentAST = compilerSFC.parse(reWritePath(content))
  console.log("ast: ", contentAST);
  console.log("query: ", req.query);
  // deal with sfc when req.query.type is empty
  if(!req.query.type) {
    const scriptContent = contentAST.descriptor.script.content
    const script = scriptContent.replace("export default", "const _script = ")
    res.setHeader("content-type", "text/javascript")
    res.send(`
      ${reWritePath(script)}
      import {render as _render} from '${req.url}?type=template';
      import '${req.url}?type=style'
      _script.render = _render
      export default _script
    `)
    res.end()
  }else if(req.query.type === 'template') {
    const templateContent = contentAST.descriptor.template.content;
    console.log("compiler: ", compilerDOM.compile(templateContent, {mode: "module"}));
    const renderContent = compilerDOM.compile(templateContent, {mode: "module"}).code
    console.log("code: ", renderContent);
    res.setHeader("content-type", "text/javascript")
    res.send(reWritePath(renderContent));
    res.end()
  }else if(req.query.type === 'style') {
    console.log(contentAST.descriptor.styles[0].content);
    const styleContent = contentAST.descriptor.styles[0].content.replace(/\s/g, "")
    res.setHeader("content-type", "text/javascript")
    res.send(`
      const style = document.createElement('style');
      style.innerHTML = '${styleContent}'
      document.head.appendChild(style)
    `);
    res.end()
  }
})

预览效果:
vite-vue-预览效果之没有process参数.png

vite-vue-预览效果之没有process参数.png

4.3. 修改/src/index.js，处理process参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js" type="module"></script>
+  <script>
+    window.process = {
+      env: {
+        NODE_ENV: "development"
+      }
+    }
+  </script>
</body>
</html>

预览效果：
添加process参数后的预览效果.png

添加process参数后的预览效果.png

5. 至此，vite解析.vue的原理基本脉络就清楚了

vite-vue-目录结构.png

vite-vue-目录结构.png

  1. package.json
{
  "name": "demo-viteCore",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1",
    "vue": "^3.2.37"
  }
}
  1. /src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js" type="module"></script>
  <script>
    window.process = {
      env: {
        NODE_ENV: "development"
      }
    }
  </script>
</body>
</html>
  1. /src/app.vue
<template>
  {{title}}
</template>
<script>
import {ref} from "vue"
export default {
  setup() {
    const title = ref("hello")
    return {
      title
    }
  }
}
</script>

<style>
*{
  color:#f00;
}
</style>
  1. /src/index.js
import { createApp} from "vue";
import app from "./app.vue"
createApp(app)
.mount("#app")
  1. /server.js
const express = require("express")
var app = express()

const compilerSFC = require("@vue/compiler-sfc")
const compilerDOM = require("@vue/compiler-dom")

const path = require("path")
const fs = require("fs")
const port = "3000"

app.get("/", (req, res, next)=>{
  res.setHeader("content-type", "text/html")
  res.send(fs.readFileSync("./src/index.html"))
  res.end()
})

app.get(/(.*)\.js$/, (req, res, next)=>{
  console.log(req.url, path.resolve(__dirname, "./src/"+ req.url));
  const p = fs.readFileSync(path.resolve(__dirname, "./src/"+ req.url), "utf-8");
  res.setHeader("content-type", "text/javascript")
  res.send(reWritePath(p))
  res.end()
})

app.get(/(.*)\.vue$/, (req, res, next)=>{
  // exclude request with ? which is template or style requestion
  const questUrl = req.url.split('?')[0]
  console.log("vue: ", req.url, path.resolve(__dirname, `./src/${questUrl}`));
  const content = fs.readFileSync(path.resolve(__dirname, `./src/${questUrl}`), 'utf-8')
  const contentAST = compilerSFC.parse(reWritePath(content))
  console.log("ast: ", contentAST);
  console.log("query: ", req.query);
  // deal with sfc when req.query.type is empty
  if(!req.query.type) {
    const scriptContent = contentAST.descriptor.script.content
    const script = scriptContent.replace("export default", "const _script = ")
    res.setHeader("content-type", "text/javascript")
    res.send(`
      ${reWritePath(script)}
      import {render as _render} from '${req.url}?type=template';
      import '${req.url}?type=style'
      _script.render = _render
      export default _script
    `)
    res.end()
  }else if(req.query.type === 'template') {
    const templateContent = contentAST.descriptor.template.content;
    console.log("compiler: ", compilerDOM.compile(templateContent, {mode: "module"}));
    const renderContent = compilerDOM.compile(templateContent, {mode: "module"}).code
    console.log("code: ", renderContent);
    res.setHeader("content-type", "text/javascript")
    res.send(reWritePath(renderContent));
    res.end()
  }else if(req.query.type === 'style') {
    console.log(contentAST.descriptor.styles[0].content);
    const styleContent = contentAST.descriptor.styles[0].content.replace(/\s/g, "")
    res.setHeader("content-type", "text/javascript")
    res.send(`
      const style = document.createElement('style');
      style.innerHTML = '${styleContent}'
      document.head.appendChild(style)
    `);
    res.end()
  }
})

app.get(/^\/@module/, (req, res, next)=>{
  console.log(req.url, req.url.slice(9));
  const moduleFolder = path.resolve(__dirname, `./node_modules/${req.url.slice(9)}`)
  const modulePackageContent = require(moduleFolder+"/package.json").module
  const finalModulePath = path.join(moduleFolder, modulePackageContent)
  console.log("finalModulePath: ", finalModulePath);
  res.setHeader("content-type", "text/javascript")
  res.send(reWritePath(fs.readFileSync(finalModulePath, "utf-8")))
  res.end()
})

function reWritePath(content) {
  let reg = / from ['"](.*)['"]/g
  return content.replace(reg, (s1, s2)=>{
    console.log(s1, " ", s2);
    if(s2.startsWith(".") || s2.startsWith("./") || s2.startsWith("../")){
      return s1
    }else {
      return `from '/@module/${s2}'`
    }
  })
}


app.listen(port, ()=>{
  console.log(`the server is listen on ${port}`);
})
文章标签：
云解析DNS
JavaScript
关键词：
云解析DNS原理
原理云解析DNS
云解析DNS文件
vite云解析DNS
云解析DNS vue
游客26saqfrmjqgis
目录
相关文章
众所周知
|
19天前
|
存储 算法 Java
解析HashSet的工作原理，揭示Set如何利用哈希算法和equals()方法确保元素唯一性，并通过示例代码展示了其“无重复”特性的具体应用
在Java中，Set接口以其独特的“无重复”特性脱颖而出。本文通过解析HashSet的工作原理，揭示Set如何利用哈希算法和equals()方法确保元素唯一性，并通过示例代码展示了其“无重复”特性的具体应用。
众所周知
38 3
AIweker
|
26天前
|
自然语言处理 数据处理 Python
python操作和解析ppt文件 | python小知识
本文将带你从零开始，了解PPT解析的工具、工作原理以及常用的基本操作，并提供具体的代码示例和必要的说明【10月更文挑战第4天】
AIweker
235 60
龙大吉
|
7天前
|
算法 Java 数据库连接
Java连接池技术，从基础概念出发，解析了连接池的工作原理及其重要性
本文详细介绍了Java连接池技术，从基础概念出发，解析了连接池的工作原理及其重要性。连接池通过复用数据库连接，显著提升了应用的性能和稳定性。文章还展示了使用HikariCP连接池的示例代码，帮助读者更好地理解和应用这一技术。
龙大吉
22 1
我是快乐的嘟嘟
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术，它允许将不同的微前端模块组合在一起，形成一个统一的应用。在 vite+vue 项目中，使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍，相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦，包括安装、配置和使用等方面。在实际开发中，你可以根据自己的需求和项目的特点，灵活地使用模块联邦，提高项目的可维护性和扩展性。
我是快乐的嘟嘟
23 1
刘大猫.
|
12天前
|
资源调度 JavaScript 前端开发
vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
刘大猫.
21 5
mzlogin
|
12天前
|
数据采集 存储 编解码
一份简明的 Base64 原理解析
Base64 编码器的原理，其实很简单，花一点点时间学会它，你就又消除了一个知识盲点。
mzlogin
42 3
技能实验室
|
19天前
|
数据安全/隐私保护 流计算 开发者
python知识点100篇系列（18）-解析m3u8文件的下载视频
【10月更文挑战第6天】m3u8是苹果公司推出的一种视频播放标准，采用UTF-8编码，主要用于记录视频的网络地址。HLS（Http Live Streaming）是苹果公司提出的一种基于HTTP的流媒体传输协议，通过m3u8索引文件按序访问ts文件，实现音视频播放。本文介绍了如何通过浏览器找到m3u8文件，解析m3u8文件获取ts文件地址，下载ts文件并解密（如有必要），最后使用ffmpeg合并ts文件为mp4文件。
技能实验室
37 1
邹荣乐
|
21天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
邹荣乐
147 0
丰宝宝
|
9天前
|
供应链 安全 分布式数据库
探索区块链技术：从原理到应用的全面解析
【10月更文挑战第22天】 本文旨在深入浅出地探讨区块链技术，一种近年来引起广泛关注的分布式账本技术。我们将从区块链的基本概念入手，逐步深入到其工作原理、关键技术特点以及在金融、供应链管理等多个领域的实际应用案例。通过这篇文章，读者不仅能够理解区块链技术的核心价值和潜力，还能获得关于如何评估和选择适合自己需求的区块链解决方案的实用建议。
丰宝宝
31 0
邹荣乐
|
21天前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
邹荣乐
68 0

热门文章

最新文章

  • 1
    vue视图更新原理、nextTick()原理
  • 2
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 3
    vue数据绑定原理
  • 4
    基于springboot+vue的医院预约系统(前后端分离)
  • 5
    揭密 Vue 的双向绑定
  • 6
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 7
    renrenfast开源项目打包过程，前端使用vue element-UI，前后端分离，打包为一个jar包运行
  • 8
    vue中异步函数async和await的用法
  • 9
    Vue打包后Echarts图表不显示问题解决
  • 10
    模拟Vue数据的双向绑定
  • 1
    Vue3 五天速成（下）
    65
  • 2
    Vue3 五天速成（中）
    56
  • 3
    Vue3 五天速成（上）
    74
  • 4
    vue3版本的爱心源码
    22
  • 5
    Vue当前时间与接口返回时间的判断
    43
  • 6
    vue生成动态表单
    30
  • 7
    Vue生成Canvas二维码
    38
  • 8
    vue项目切换页面白屏的解决方案
    146
  • 9
    Vue3 项目中怎么使用 jsx——易懂
    42
  • 10
    vue3 实现电子签名
    375

    • 相关课程

    更多
  • 深入解析Docker容器化技术
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 神龙云服务器产品及技术深度解析
  • 弹性创造价值：基于ECS的最佳性价比实践解析
  • 又快又稳：阿里云下一代虚拟交换机解析

    • 相关实验场景

    更多
  • 通过云拨测对指定服务器进行Ping/DNS监测
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境

    • 推荐镜像

    更多
  • DNS
  • kali-security
  • NTP
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！