美文网首页
vite技术揭秘--本地serve的创建

vite技术揭秘--本地serve的创建

作者: 习惯水文的前端苏 | 来源:发表于2022-08-20 17:26 被阅读0次

\bullet 配置合并

    \ast 合并的源大致有三种:命令行传入的、默认的和vite.config中定义的

        \alpha 命令行

             可以看到,vite中使用第三方包cac来快速创建cli

             对dev、build、optimize、preview这四种模式做了参数收集工作,与scripts中的脚本指令对应

            对于当前的dev模式下,支持的配置项如下

( 当前收集到的参数就只有port:3000)

        \beta 默认的则是对命令行中或者vite.config中没找到的配置项定义默认值,它多分散在代码逻辑的各处

        \gamma vite..config中的则需要查找路径读取

                    如下,如果指定了--c则进入if,否则,vite会自己到项目根目录下进行查找

                找到之后再使用node去读取

        合并则主要是通过mergeConfig函数来完成

        其实,合并的本质就是对对象同名key做覆盖,这和我们日常coding时写的代码区别不大,只不过它会更复杂一些,情况更多一些。伪代码如下

\bullet 创建server

        源码绕来绕去的极其复杂,包括对插件的调用,proxy代理的设置以及热更新处理等,但本质上就是利用的node提供的http模块搭建的本地服务端,然后在此基础上去丰富配置和能力

相关文章

  • vite技术揭秘--本地serve的创建

    配置合并 合并的源大致有三种:命令行传入的、默认的和vite.config中定义的 命令行 可以看到,vite...

  • vite技术揭秘--模版创建

    创建命令 pnpm create vite packageName 源码 参数选项 在创建模版时...

  • vscode搭建vue开发环境

    PS:需要先在本地安装nodejs及vscode,步骤省略 1、安装vite 2、创建vue项目 3、安装vite...

  • vite技术揭秘--alias

    前言 alias作为锦上添花的东西,不仅能提高开发效率,也有利于后续迭代维护 在看源码前,我的思路是这样的...

  • vite技术揭秘--proxy代理

    前言 前面两节,我们分别了解了vite模板的创建[https://www.jianshu.com/p/639b...

  • vite技术揭秘--环境变量

    前言 我们开发中不可避免的要根据环境变量来做一些逻辑分支,在vite中有两种实现方式,即define和.env...

  • Vue3:vite 的基本使用

    1. 创建 vite 的项目 按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目 创建...

  • 本地启动serve

    Open your terminal and type npm install -g http-server Go...

  • [vite源码解析]插件篇

    vite的插件基于rollup,在本地服务生成是会同事创建插件容器,按顺序针对插件中的hook做批量调用,当前支持...

  • http模块(学习笔记)

    引入http模块 创建一个本地静态服务器 http.createServer 用于常见一个静态服务器. serve...

网友评论

      本文标题:vite技术揭秘--本地serve的创建

      本文链接:https://www.haomeiwen.com/subject/gqwjirtx.html