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

vite原理之解析.vue文件

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

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    一文梳理Vue3核心原理
  • 4
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 5
    自制简单的range（Vue）
  • 6
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 7
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 8
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 9
    毕业设计｜基于NODE+VUE的校园跑腿平台系统
  • 10
    自定义事件在 Vue.js 组件中的应用
  • 1
    详解Java解析XML的四种方法
    338
  • 2
    xenomai内核解析--双核系统调用(三)--如何为xenomai添加一个系统调用
    84
  • 3
    xenomai内核解析--双核系统调用(二)--应用如何区分xenomai/linux系统调用或服务
    201
  • 4
    xenomai内核解析--双核系统调用(一)
    162
  • 5
    xenomai内核解析--任务同步互斥机制(一)--优先级倒置
    156
  • 6
    xenomai内核解析--实时内存管理--xnheap
    179
  • 7
    xenomai内核解析之xenomai初探
    509
  • 8
    xenomai内核解析--实时IPC概述
    178
  • 9
    xenomai内核解析--xenomai与普通linux进程之间通讯XDDP(一)--实时端socket创建流程
    455
  • 10
    xenomai内核解析--xenomai与普通linux进程之间通讯XDDP(二)--实时与非实时关联(bind流程)
    177

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

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

    • 推荐镜像

    更多
  • DNS
  • kali-security
  • NTP
    • 下一篇
    阿里云OSS设置跨域访问