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

[chieffo]

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

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

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

[zxCoder]

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

[catinsides]

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

[chieffo]

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

[chieffo]

@catinsides

[NodeSans]

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

[Trim21]

学不动，还在用 webpack🐶

[afewok]

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

[uxstone]

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

[chieffo]

@Trim21 webpack 更学不动😂

[seakingii]

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

[neal2020]

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

[Geo200]

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

[creanme]

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

[sickoo]

@afewok 实话。

[zhwithsweet]

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

[beginor]

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

[flyhaozi]

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

[flyhaozi]

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

[wanacry]

娱乐圈又开始了

[anguiao]

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

[catinsides]

@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]

对于纯前端是可以的。

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

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

[chieffo]

@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]

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

[makelove]

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

[mikulch]

前端又变天了？

[cweijan]

写 Vue3 不错, 启动很快

[DiamondYuan]

@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]

@cweijan Vue3 + Vite 真香

[rodrick]

很好用 之前旧的 react 项目转 vite 在 antd 上碰到了一些坑 是生产打包和 dev 不同表现的情况 后来 githubc 查查也是能查到的 总体还是很香的

[Opportunity]

@DiamondYuan vite 不是用的 esbuild ？我看 esbuild 文档说不支持这些，我都没再试了。。

[EPr2hh6LADQWqRVH]

@DiamondYuan 那说明你根本没用到 DecoratorMetadata

[ccyu220]

@avastms 哇！ DecoratorMetadata，『装饰器』好高端啊

[uni]

@NodeSans 要用 beta 版的 devtool 才行，跟现在 stable 版的暂时还不兼容

[NodeSans]

@uni 了解了，谢谢

[SmiteChow]

没用过，但我知道下一代一定不是它，而是进化中的现代浏览器，目前浏览器已经原生支持 html/css/js module 了，私有项目我都不用打包工具了。