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

vite原理之解析.vue文件

2022-07-03 1020
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
全局流量管理 GTM，标准版 1个月
云解析 DNS，旗舰版 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
VUE.js解析
VUE.js原理
游客26saqfrmjqgis
目录
相关文章
喜欢猪猪
|
27天前
|
存储 缓存 算法
HashMap深度解析：从原理到实战
HashMap，作为Java集合框架中的一个核心组件，以其高效的键值对存储和检索机制，在软件开发中扮演着举足轻重的角色。作为一名资深的AI工程师，深入理解HashMap的原理、历史、业务场景以及实战应用，对于提升数据处理和算法实现的效率至关重要。本文将通过手绘结构图、流程图，结合Java代码示例，全方位解析HashMap，帮助读者从理论到实践全面掌握这一关键技术。
喜欢猪猪
77 13
G0518
|
2月前
|
运维 持续交付 云计算
深入解析云计算中的微服务架构：原理、优势与实践
深入解析云计算中的微服务架构：原理、优势与实践
G0518
85 1
周周的奇妙编程
|
2天前
|
机器学习/深度学习 自然语言处理 搜索推荐
自注意力机制全解析：从原理到计算细节，一文尽览！
自注意力机制（Self-Attention）最早可追溯至20世纪70年代的神经网络研究，但直到2017年Google Brain团队提出Transformer架构后才广泛应用于深度学习。它通过计算序列内部元素间的相关性，捕捉复杂依赖关系，并支持并行化训练，显著提升了处理长文本和序列数据的能力。相比传统的RNN、LSTM和GRU，自注意力机制在自然语言处理（NLP）、计算机视觉、语音识别及推荐系统等领域展现出卓越性能。其核心步骤包括生成查询（Q）、键（K）和值（V）向量，计算缩放点积注意力得分，应用Softmax归一化，以及加权求和生成输出。自注意力机制提高了模型的表达能力，带来了更精准的服务。
周周的奇妙编程
273 39
蚝油菜花
|
14天前
|
人工智能 自然语言处理 Java
FastExcel：开源的 JAVA 解析 Excel 工具，集成 AI 通过自然语言处理 Excel 文件，完全兼容 EasyExcel
FastExcel 是一款基于 Java 的高性能 Excel 处理工具，专注于优化大规模数据处理，提供简洁易用的 API 和流式操作能力，支持从 EasyExcel 无缝迁移。
蚝油菜花
74 9
FastExcel：开源的 JAVA 解析 Excel 工具，集成 AI 通过自然语言处理 Excel 文件，完全兼容 EasyExcel
bug菌
|
11天前
|
自然语言处理 文字识别 数据处理
多模态文件信息抽取：技术解析与实践评测！
在大数据和人工智能时代，企业和开发者面临的挑战是如何高效处理多模态数据（文本、图像、音频、视频）以快速提取有价值信息。传统方法效率低下，难以满足现代需求。本文将深度评测阿里云的多模态文件信息抽取解决方案，涵盖部署、应用、功能与性能，揭示其在复杂数据处理中的潜力。通过自然语言处理（NLP）、计算机视觉（CV）、语音识别（ASR）等技术，该方案助力企业挖掘多模态数据的价值，提升数据利用效率。
bug菌
35 4
多模态文件信息抽取：技术解析与实践评测！
喵手
|
11天前
|
文字识别 自然语言处理 算法
从多模态到精准洞察：深度解析多模态文件信息提取解决方案！
阿里云推出《多模态数据信息提取》解决方案，涵盖文本、图像、音频、视频等多种数据形式的自动化处理。本文从部署体验、功能验证到实际应用，全面解析该方案的能力与潜力，帮助开发者高效提取和整合复杂数据，提升工作效率...
喵手
37 3
从多模态到精准洞察：深度解析多模态文件信息提取解决方案！
申某某
|
13天前
|
存储 物联网 大数据
探索阿里云 Flink 物化表：原理、优势与应用场景全解析
阿里云Flink的物化表是流批一体化平台中的关键特性，支持低延迟实时更新、灵活查询性能、无缝流批处理和高容错性。它广泛应用于电商、物联网和金融等领域，助力企业高效处理实时数据，提升业务决策能力。实践案例表明，物化表显著提高了交易欺诈损失率的控制和信贷审批效率，推动企业在数字化转型中取得竞争优势。
申某某
60 14
栈江湖
|
21天前
|
网络协议 安全 网络安全
探索网络模型与协议：从OSI到HTTPs的原理解析
OSI七层网络模型和TCP/IP四层模型是理解和设计计算机网络的框架。OSI模型包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层，而TCP/IP模型则简化为链路层、网络层、传输层和 HTTPS协议基于HTTP并通过TLS/SSL加密数据，确保安全传输。其连接过程涉及TCP三次握手、SSL证书验证、对称密钥交换等步骤，以保障通信的安全性和完整性。数字信封技术使用非对称加密和数字证书确保数据的机密性和身份认证。 浏览器通过Https访问网站的过程包括输入网址、DNS解析、建立TCP连接、发送HTTPS请求、接收响应、验证证书和解析网页内容等步骤，确保用户与服务器之间的安全通信。
栈江湖
84 1
G0518
|
2月前
|
存储 供应链 算法
深入解析区块链技术的核心原理与应用前景
深入解析区块链技术的核心原理与应用前景
G0518
72 0
九月天空
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析：从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析：从Vue 2到Vue 3的演进
九月天空
73 0

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VSCode .vue 文件 html css 无智能提示
  • 3
    uniapp使用Vue3挂载函数到全局
  • 4
    vue3.0 router路由跳转传参（router.push）
  • 5
    「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器
  • 6
    Vue中 引入外部字体并使用
  • 7
    VUE练习题【详解】
  • 8
    关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法
  • 9
    vue 实现pdf预览和下载
  • 10
    vue使用elementui中的el-table后端筛选功能讲解
  • 1
    【Uniapp 专栏】Uniapp 的状态管理功能深度解析
    374
  • 2
    React Hooks实战：从useState到useContext深度解析
    117
  • 3
    销售利器大集结：13种智能销售工具全面解析
    335
  • 4
    【Uniapp 专栏】基于 Uniapp 的电商应用开发案例解析
    244
  • 5
    XML DOM 解析器
    66
  • 6
    构建高效AI系统：深度学习优化技术解析
    641
  • 7
    Java 8新特性之Lambda表达式与Stream API的深度解析
    113
  • 8
    深入解析Linux tee命令：从基础用法到高级场景的全面指南
    1514
  • 9
    PandasTA 源码解析（二十三）
    85
  • 10
    PandasTA 源码解析（二十二）（3）
    82

    • 相关课程

    更多
  • 深入解析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
  • wireshark
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅