大前端备战2021年，使用vite构建React !

最新推荐文章于 2024-09-11 08:26:13 发布

弹琴弹琴

最新推荐文章于 2024-09-11 08:26:13 发布

阅读量254

点赞数

分类专栏：框架库点滴知识文章标签： vite

原文链接：https://blog.csdn.net/petertanjinjie/article/details/111878446

版权

框架库点滴知识专栏收录该内容

96 篇文章 0 订阅

订阅专栏

写在开头

由于 vite这个构建工具被用在了vue3上门，而且它的构建思路我觉得优于webpack,底层也是使用了esbuild,性能上更优
那么为了照顾一些小伙伴之前没有学习过vite的，我们先来看看什么是vite

什么是vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用,支持热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包
vite的天然优势：
- 快速冷启动服务器
- 即时热模块更换（HMR）
- 真正的按需编译

vite工作原理

当声明一个 script 标签类型为 module 时

如：  <script type="module" src="/src/main.js"></script>

浏览器就会像服务器发起一个GET http://localhost:3000/src/main.js请求main.js文件：

// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件
如：GET http://localhost:3000/@modules/vue.js
如：GET http://localhost:3000/src/App.vue
其Vite 的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器渲染页面，vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多

简单实现vite

由于代码量有一些大，我就不自己去写了，直接拿了别人的代码过来，原文地址是:

https://juejin.cn/post/6898116372887240712

首先是koa启动监听端口，用于访问热更新服务

function createServer() {
let app = new Koa()
const context = { // 直接创建一个上下文来给不同的插件共享功能
app,
root: process.cwd() //执行node命令的那个命令路径
}
// 运行koa中间件(就是我们的vite插件)
resolvePlugin.forEach(plugin => plugin(context))
return app
}
createServer().listen(4000, () => {
})

编写对应插件处理
首先处理模块的引用，因为浏览器只有相对路径和绝对路径

这里readBody其实就是一个读取文件流的方法，封装过而已，看成普通的读取流方法即可

koa中间件处理

首先处理重写路径，因为浏览器只有绝对路径和相对路径

app.use(async (ctx, next) => {
await next(); // 静态服务
// 默认会先执行静态服务中间件会将结果放到 ctx.body
// 需要将流转换成字符串 , 只需要处理js中的引用问题
if (ctx.body && ctx.response.is('js')) {
let r = await readBody(ctx.body); // vue => /@modules
const result = rewriteImports(r);
ctx.body = result;
}
})
},

重写完了路径后，需要拦截.vue文件和带@module(重写路径之前就是node_modules里面的文件)

// 2. 拦截含有/@modules/vue的请求, 去node_modules引入对应的模块并返回
({ app, root }) => {
const reg = /^\/@modules\//
app.use(async (ctx, next) => {
// 如果没有匹配到 /@modules/vue 就往下执行即可
if (!reg.test(ctx.path)) {
return next();
}
const id = ctx.path.replace(reg, '');
let mapping = {
vue: path.resolve(root, 'node_modules', '@vue/runtime-dom/dist/runtime-dom.esm-browser.js'),
}
const content = await fs.readFile(mapping[id], 'utf8');
ctx.type = 'js'; // 返回的文件是js
ctx.body = content;
})
},

当解析处理完路径后，我们需要解析vue的模板文件，（如果是react的jsx代码,同理）

// 3. 解析.vue文件
({ app, root }) => {
app.use(async (ctx, next) => {
if (!ctx.path.endsWith('.vue')) {
return next();
}
const filePath = path.join(root, ctx.path);
const content = await fs.readFile(filePath, 'utf8');
// 引入.vue文件解析模板
const { compileTemplate, parse } = require(path.resolve(root, 'node_modules', '@vue/compiler-sfc/dist/compiler-sfc.cjs'))
let { descriptor } = parse(content);
if (!ctx.query.type) {
//App.vue
let code = ''
if (descriptor.script) {
let content = descriptor.script.content;
code += content.replace(/((?:^|\n|;)\s*)export default/, '$1const __script=');
}
if (descriptor.template) {
const requestPath = ctx.path + `?type=template`;
code += `\nimport { render as __render } from "${requestPath}"`;
code += `\n__script.render = __render`
}
code += `\nexport default __script`
ctx.type = 'js';
ctx.body = code
}
if (ctx.query.type == 'template') {
ctx.type = 'js';
let content = descriptor.template.content
const { code } = compileTemplate({ source: content }); // 将app.vue中的模板转换成render函数
ctx.body = code;
}
})
},
// 4. 静态服务插件实现可以返回文件的功能
({ app, root }) => {
app.use(static(root))
app.use(static(path.resolve(root, 'public')))
}
]
function createServer() {
let app = new Koa()
const context = { // 直接创建一个上下文来给不同的插件共享功能
app,
root: process.cwd() // C:\Users\...\my-vite-vue3
}
// 运行中间件
resolvePlugin.forEach(plugin => plugin(context))
return app
}