vitejs vs webpack? 2022 年了，选哪个？

[ericgui]

我用 react

感觉 vite 虽然快，但生态还是差点意思，比如，没有官方的 eslint 插件，甚至没有一个被广泛接受的一个社区插件。官方给的理由是， [ eslint is an optional tool for development and not all projects are using them. This feature could be served as a plugin instead of the core. Thanks.] 这不废话嘛，你当然可以不用，但稍微上点规模的项目，哪个不用 eslint ？

https://github.com/vitejs/vite/issues/818

我其实特别想试试 vite ，但奈何这生态不给力，官方也找理由推脱

除了 eslint ，还有什么其他坑？

[ccyu220]

vite 配置 eslint 直接用以前 create-app 下面那一套不就好了，不然就 npx eslint --init ，这应该没有什么问题吧。

[ccyu220]

并且 vite-plugin-eslint 这个不就是 eslint 插件吗...

[hb751968840]

上规模的不应该是 pre-commit 时 lint 吗，用 husky ，跟 vite ，webpack 没关联。

[fpure]

写 ts 的时候用了一下 vite ，浏览器原生的模块化的思想确实好用

[makelove]

vite 不是打包工具吗，怎么扯上 eslint 了

[itfanr]

@makelove 同问

[tomieric]

因为推荐的是 TS 写代码

[ryougifujino]

@tomieric #7 TS 写代码也是要上 ESLint 的

[dtdths1]

杰哥：我看你是完全不懂哦～

[agdhole]

vite 用 eslint 完全没问题啊

[duan602728596]

eslint 交给 IDE 就好了，然后在提交时检查一遍。没有必要在开发时配置。
每次修改文件后都要检查一遍，不觉得编译慢吗？

[wenerme]

选 NextJS 或 Vite 或 ESBuild 或 Rollup 或 SWC
Webpack 是不可能了

- NextJS - 开箱即用，支持 SSR ，支持 API ，支持 Layout SSR ，支持 SIG
- 缺点： 只是应用开发
- Vite = ESBuild + Rollup + DevServer
- ESBuild - 快准狠，watch 开发环境友好，可以开发 node 项目
- 缺点 有一些 -> https://wener.me/notes/web/dev/bundle/esbuild
- Rollup - 支持更丰富的 包 - 例如 systemjs ，支持使用 ESBuild 作为插件
- 缺点 rollup 3 还没正式发布 https://wener.me/notes/web/dev/bundle/rollup
- SWC - 快，但还不完善 - SWC vs ESBuild -> https://wener.me/notes/web/dev/bundle/swc

> 选择工具的时候优先看不能做什么，边界在哪里

无脑选择 NextJS ，更细的则自己构建整个逻辑，例如 自定义 rollup 然后复用逻辑到多个项目

- https://github.com/wenerme/wode/blob/main/packages/wode/rollup.mjs
- 配置被 https://github.com/wenerme/wode/blob/main/packages/torrent/rollup.bundle.mjs 这里使用

除了 web 开发，测试也需要 transpile ，建议 esbuild - 最快，配合 ava 很方便 https://github.com/wenerme/wode/blob/8a4c16cbd71cbc3c5d25142997b97700d6521eff/packages/torrent/package.json#L77-L86

[zhwithsweet]

你根据我这个改改就行： https://github.com/fisand/vite-wagmi-seed

- 写好了 eslint 已经常用的规则
- 支持辅助型的 ts-checker ；（因为 esbuild 不会校验类型
- 内置原子类 css / file style router / jotai / antd
- 无黑盒逻辑，可以把 web3 相关的删了开发普通应用

[dcsuibian]

如果是 vue3 的话，我就用 vite 了
如果是 React 的话，我就用 Next.js ，Next.js 下面用啥我用啥

[liuzhaowei55]

我选 webpack ，vite 偶尔会遇到一些莫名其妙的问题，自己的项目尝试更换过，劝退

[knives]

我选 webpack + swc 。swc 的插件个人感觉还是略复杂，不如 webpack 的开箱即用。合起来用慢就慢点吧……

[yikyo]

强迫症比我严重，eslint 在 commit 时检查就好了，husky

[cwliang]

无脑 webpack 生态齐全，遇到问题好解决。vite 使用量太少了，遇到问题可能 stackoverlow 上不一定能找到。
对我来说成熟方案少折腾就足够了
还有尤大 diss react 团队不提供 vite 的集成模版，就很无语，你若盛开蝴蝶自来

[ericgui]

@cwliang Evan 一直都有 attitude 的问题。

[ryougifujino]

其实 webpack5 还是不错的，dev 和 prod 都有 cache 可以配，配合 thread-loader 可以进一步提速。等以后的 lazyCompilation 变成正式功能以后 devServer 的启动速度可以进一步提高（现在是 experiments ）。而且作者在 Next.js ，所以他们肯定选 webpack 。

[zhwithsweet]

@ericgui #19 奥，说到底是想把 Evan 批判一番？

[ericgui]

@zhwithsweet 批他不批他，已经无所谓了吧，我最近有一个项目用了 vitejs ，刚才研究了一下，如果实在 vitejs 用不下去，应该可以很快换成 webpack ，问题不大

[karott7]

少了个 eslint 插件就生态差点意思？配 eslint 很花时间？
都是被人喂饭喂多了惯出来的，也别拿 nextjs 和 vite 比了，定位都不一样

[wangerka]

就一个打包工具，网上随便找一个 xxx-vite-starter 的模板就行了，就算遇到问题想换 webpack ，把 vite.config.js 改成 webpack.config.js ，改一下 package.json 和 env 相关的代码，一会儿的事。
我个人习惯用 vite ，你如果害怕有坑的话，还是建议用 webpack 。

[wangerka]

eslint 和 vite 没有直接关系，pre-commit + lint-staged 可以搞定 eslint/stylelint/prettier 。vite 的社区插件没有 webpack 多，但是可以用 rollup 的。

[wu67]

vite 只是个打包的呀, eslint 你爱怎么配就怎么配, 不是还有 vite-plugin-eslint 吗, 自己配也不用多少时间

[ccyu220]

@ericgui 说到底还是先入为主带有偏见，技术这种东西，能干活就好。

[Envov]

我对 webpack 更熟悉，所以用的 webpack