是什么尤大选择放弃Webpack？Vite 原理解析

作者：「橙红年代」

原文: https://juejin.im/post/5ea2361de51d454714428b44

预备知识

vite重度依赖module sciprt的特性，因此需要提前做下功课，参考：JavaScript modules 模块 - MDN。

module sciprt允许在浏览器中直接运行原生支持模块

<script type="module">
    // index.js可以通过export导出模块，也可以在其中继续使用import加载其他依赖 
    import App from  ./index.js 
</script>

当遇见import依赖时，会直接发起http请求对应的模块文件。

开发环境

本文使用的版本为vite@0.3.2，附github项目地址~目前这个项目貌似每天都在更新

首先克隆仓库

git clone https://github.com/vuejs/vite
cd vite && yarn

环境安装完毕后在项目下创建examples目录，新增index.html和Comp.vue文件，这里直接用README.md中的例子

首先是inidex.html

<div id="app"></div>
<script type="module">
import { createApp } from  vue 
import Comp from  ./Comp.vue


createApp(Comp).mount( #app )
</script>

然后是`Comp.vue``

<template>
  <button @click="count++">{
  { count }} times</button>
</template>


<script>
export default {
  data: () => ({ count: 0 })
}
</script>


<style scoped>
button { color: red }
</style>

然后在exmples目录下运行

../bin/vite.js

即可在浏览器http://localhost:3000打开预览，同时支持文件热更新哦~

如果需要调试源码，启动npm run dev即可，会开启tsc -w --p监听src目录的改动并实时输出到dist目录下，接下来就可以开启欢乐的源码时间~

入口文件

目前这个项目迭代非常频繁（昨天还有historyFallbackMiddleware这个中间件呢今天貌似就没了），但是大概的实现思路应该是基本确定了，因此先确定本次源码阅读目标：了解如何在不使用webpack等打包工具的前提下直接运行vue文件。基于这个目的，主要是了解实现思路，理清整体结构，不用拘泥于具体细节。

从入口bin/vite.js开始

const server = require( ../dist/server ).createServer(argv)

可以看见createServer方法，直接定位到s