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

vite原理之解析.vue文件

2022-07-03 991
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云解析 DNS，旗舰版 1个月
全局流量管理 GTM，标准版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
简介： 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
目录
相关文章
众所周知
|
21天前
|
存储 算法 Java
解析HashSet的工作原理，揭示Set如何利用哈希算法和equals()方法确保元素唯一性，并通过示例代码展示了其“无重复”特性的具体应用
在Java中，Set接口以其独特的“无重复”特性脱颖而出。本文通过解析HashSet的工作原理，揭示Set如何利用哈希算法和equals()方法确保元素唯一性，并通过示例代码展示了其“无重复”特性的具体应用。
众所周知
38 3
dufadayang
|
11天前
|
缓存 JavaScript 搜索推荐
Vue SSR（服务端渲染）预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制，实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展，Vue SSR 预渲染技术也将不断完善和创新，以适应不断变化的互联网环境和用户需求。
dufadayang
30 9
龙大吉
|
8天前
|
算法 Java 数据库连接
Java连接池技术，从基础概念出发，解析了连接池的工作原理及其重要性
本文详细介绍了Java连接池技术，从基础概念出发，解析了连接池的工作原理及其重要性。连接池通过复用数据库连接，显著提升了应用的性能和稳定性。文章还展示了使用HikariCP连接池的示例代码，帮助读者更好地理解和应用这一技术。
龙大吉
23 1
我是快乐的嘟嘟
|
9天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术，它允许将不同的微前端模块组合在一起，形成一个统一的应用。在 vite+vue 项目中，使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍，相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦，包括安装、配置和使用等方面。在实际开发中，你可以根据自己的需求和项目的特点，灵活地使用模块联邦，提高项目的可维护性和扩展性。
我是快乐的嘟嘟
34 1
刘大猫.
|
13天前
|
资源调度 JavaScript 前端开发
vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
刘大猫.
21 5
mzlogin
|
14天前
|
数据采集 存储 编解码
一份简明的 Base64 原理解析
Base64 编码器的原理，其实很简单，花一点点时间学会它，你就又消除了一个知识盲点。
mzlogin
45 3
邹荣乐
|
22天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
邹荣乐
164 0
丰宝宝
|
11天前
|
供应链 安全 分布式数据库
探索区块链技术：从原理到应用的全面解析
【10月更文挑战第22天】 本文旨在深入浅出地探讨区块链技术，一种近年来引起广泛关注的分布式账本技术。我们将从区块链的基本概念入手，逐步深入到其工作原理、关键技术特点以及在金融、供应链管理等多个领域的实际应用案例。通过这篇文章，读者不仅能够理解区块链技术的核心价值和潜力，还能获得关于如何评估和选择适合自己需求的区块链解决方案的实用建议。
丰宝宝
33 0
刘大猫.
|
13天前
|
JavaScript 前端开发 API
vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
刘大猫.
22 0
邹荣乐
|
22天前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
邹荣乐
69 0

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 3
    一文梳理Vue3核心原理
  • 4
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 5
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 6
    新建Vue项目
  • 7
    Vue 报错Failed to mount component: template or render function not defined
  • 8
    [记录] 使用Vue-cli搭建项目教程
  • 9
    Vue路由和Node.js环境搭建
  • 10
    Vue小项目01——标签记录器
  • 1
    在Vue中，子组件向父组件传递数据
    72
  • 2
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    95
  • 3
    【vue3】vue3中路由hash与History的设置
    204
  • 4
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1066
  • 5
    【vue】 el-table解决分页不能筛选全部数据的问题
    441
  • 6
    【vue】 vue2 监听滚动条滚动事件
    140
  • 7
    【天地图】vue 天地图 T is not defined
    167
  • 8
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    582
  • 9
    【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件，导致该弹出菜单残留
    312
  • 10
    【vue】自定义指令实现 复制、长按、水印 功能
    314

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

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

    • 推荐镜像

    更多
  • DNS
  • NTP
  • kali-security
    • 下一篇
    DataWorks售前咨询