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

[chieffo]

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

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

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

[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 了，私有项目我都不用打包工具了。