Vite：下一代前端开发与构建工具？大伙使用效果如何？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1147 天前的主题，其中的信息可能已经有所发展或是发生改变。

我尝试转换了我个人的旧项目，切换成 Vite 后果然像尤雨溪说的，用了就回不去了哈哈～

对旧项目进行转换到 Vite 项目时，搜索错误信息发现一个 GitHub 项目，它列出了一些转换项和错误修复方法，甚至可以一键转换旧项目到 Vite 项目，非常棒，推荐一下！

项目地址： https://github.com/originjs/webpack-to-vite

vite

项目

转换

GitHub

36 条回复 • 2021-10-08 17:27:41 +08:00

zxCoder

2021-10-01 19:24:17 +08:00

有时候会遇到一些奇怪的兼容问题，不过一般查到 github 都能找到解决方案

catinsides

2021-10-01 19:29:14 +08:00

vue2 支持的不完美，jsx 报错搜不到解决方法。我用的就是官方推荐的 vue2 插件，按照说明文档配置也不好用。等别人把坑踩完了再考虑吧。

chieffo

2021-10-01 20:09:15 +08:00

确实，vite 对 vue2 可能不太友好，毕竟官方想主推 vue3. 不过你这个 jsx 报错的问题我好像也遇到了，可以参考看看 https://github.com/originjs/webpack-to-vite/blob/main/README.md?plain=1#L227-L268

chieffo

2021-10-01 20:09:45 +08:00

@catinsides

NodeSans

2021-10-01 20:53:00 +08:00

感觉还是挺清爽的，而且速度快，就是今天用的时候不知道为什么 Vue devtools 说我这个项目不是 vue 项目，就很奇怪，其他都挺好的

Trim21

2021-10-01 21:00:35 +08:00 via Android

学不动，还在用 webpack🐶

afewok

2021-10-01 21:21:24 +08:00

Vue 、Vite 是限制你们的深入的毒瘤啊

uxstone

2021-10-01 21:35:30 +08:00

一句话，Vite 的易用性秒杀 create-react-app 。
还折腾啥 Webpack 啊。

chieffo

2021-10-01 21:42:12 +08:00

@Trim21 webpack 更学不动😂

seakingii

2021-10-01 21:51:37 +08:00

用着还好,除了比较新,有些小问题,不好找答案.
比 webpack 速度快

neal2020

2021-10-01 22:16:23 +08:00

用了两个月了，真的很好用

Geo200

2021-10-01 22:27:21 +08:00 via Android

@chieffo 最近也在做 vue2 的 jsx 兼容，发现 nodemodules 下的 jsx 解析死活有问题，被卡住了🙃

creanme

2021-10-01 22:37:30 +08:00

不太明白为啥 vite 选择用 rollup 打包，不选择打包走 webpack 那套

sickoo

2021-10-01 22:43:07 +08:00

@afewok 实话。

zhwithsweet

2021-10-01 23:15:17 +08:00 via iPhone

snowpack 作者宣布考虑从 snowpack 转向 vite

beginor

2021-10-01 23:42:40 +08:00 via Android

@creanme webpack 打包的模块会依赖 webpack runtime，而 rollup 打包出来的是原生 ES6 模块，无任何第三方依赖。

flyhaozi

2021-10-02 00:37:24 +08:00

@zhwithsweet ？？我的个人项目才刚从 @pika/web 转到 snowpack😂

flyhaozi

2021-10-02 01:16:52 +08:00

@zhwithsweet 看到作者的这篇文章了，https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9
维护这么大一个开源项目是真的不容易，下载量开始减慢，贡献者不足，所以我也去试试 vite [

wanacry

2021-10-02 02:13:52 +08:00 via iPhone

娱乐圈又开始了

anguiao

2021-10-02 10:06:39 +08:00

@afewok
不是人人都需要所谓的“深入”。
对很多人来说，繁杂的配置除了平添复杂度、提高门槛以外，没有任何意义。
你想深入可以等有更复杂的需求了再深入学习，而不是一开始就把本应该简单的事情复杂化。

catinsides

2021-10-02 11:01:58 +08:00

@chieffo #3
我从 github 找了一个别人的 vite vue2 项目测试了一下是好用的，等开工了我再试试自己的项目。
简单总结一下，方便以后搜索到的人：
1. npm i -D @vitejs/plugin-vue-jsx
2. 包含 jsx 的文件要标注<script lang="jsx"></script>
3. babel.config.js 内的配置改为 presets: [['@vue/babel-preset-jsx']],

EPr2hh6LADQWqRVH

2021-10-02 11:09:39 +08:00

对于纯前端是可以的。

纯前端，也称尤雨溪的前端：别涉及 Electron，别涉及 Node.js ，别想放在别的小众 js runtime 里面跑。

Ts 别涉及 DecoratorMetadata，别玩依赖注入，Angular 无缘。

chieffo

2021-10-02 12:10:03 +08:00

@Geo200 试试在我上面提到的 GitHub 仓库提个 issue 问问？我之前遇到的 jsx 问题也是靠他们解决的 : )

@afewok 同意 @anguiao 的说法，你想“深入”没有什么工具能阻止你，需要的时候你自然会想办法“深入”，而简单的工具产生的收益比所谓的“深入”有价值多了

@flyhaozi snowpack 作者都放弃维护，转向 vite 了：At the same time, Vite (that Snowpack alternative that now powers SvelteKit) is taking off. https://segmentfault.com/a/1190000040722202

@catinsides #21 有用就好，这些坑确实比较麻烦，得参考别人的踩坑经验 lol

@avastms 目前来看是这样了，老哥理解到位

CrispElite

2021-10-02 12:36:36 +08:00

大家追 vite 的样子好像当时追 webpack 的样子 🐶

makelove

2021-10-02 13:29:18 +08:00

@avastms 啥叫纯前端？ NodeJS 为什么要用 Vite 打包？我前端用 Vite,后端用 tsc，想不出后端也要 Vite 的必要性

mikulch

2021-10-02 13:56:53 +08:00

前端又变天了？

cweijan

2021-10-02 17:27:21 +08:00

写 Vue3 不错, 启动很快

DiamondYuan

2021-10-02 22:35:48 +08:00

@avastms 不敢苟同

1. Node.js 和 Electron 可以使用 ts-node + rollup，前端部分使用 vite 。

+ 开发时使用 ts-node 实现 Node.js 和 Electron 无 bundle 开发
+ 生产构建可以用 rollup 打包 elec 。Vite 和 rollup 可以共享配置和插件 (例如 minify 插件。

2. 我是纯 ts 项目、开启了 emitDecoratorMetadata 、experimentalDecorators，并没有遇到任何问题。依赖注入是从 vs code 源码拷贝的，也没有任何问题。

chieffo

2021-10-03 10:07:55 +08:00

@cweijan Vue3 + Vite 真香