前端现在主流包管理和打包构建方案是什么？

[COW]

首先声明下本人前端纯小白（勿喷）。最近想随便写点东西玩玩，熟悉下前端技术栈，目前用 nvm 管理 node 版本，已经确定了 v20+，为了避免踩坑，想咨询下前端技术栈相关的最佳实践。

包管理器有 n 种选择，npm、yarn、pnpm、bun，还有个包管理器的管理器 corepack😓，似乎用 corepack 然后随便 enable 一个就够了？

服务端渲染场景用 next 还是 nuxt 呢（似乎 vue 上手简单点），然后用 docker + pm2 管理？

打包构建工具又有 webpack、rollup、vite、parcel 各种选择，哪个简单又强大呢？

[lanisle]

找几个热门的开源项目不就有的参考了。

[qW7bo2FbzbC0]

从 0 开始 react ，我用的 vite + react-router

[abc1310054026]

新手别考虑这么多，npm + vue/react + vite/webpack 就够了。后面的根据你自己的需求学习/使用。

没有所谓“完美”的方案，都是根据自身需求选择的。

[liaozzzzzz]

个人习惯
nvm：管理 node 版本
nrm：管理镜像源
pnpm：管理依赖
vite：打包
框架：vue （ nuxt ）、react （ next ）、node （ nest ）

[PTLin]

跟着脚手架走

[duanxianze]

想的太多了，纯小白直接 html js css 上手写就是了

[COW]

@duanxianze 也不算新手，我几年前之前用 jq 写过简单前端项目，只是没用 vue react 这种框架

[wangtian2020]

公司前端我说了算，我就 node@22+npm+vite@5+vue@3 上去干

nvm 我都不需要，老项目不归我管。
vite 就是用的 rollup 打包的。
一定一定要记得，老项目别用 node-sass 了用 dart-sass ，还被 node-sass 弄的要切 node 版本的只能说前端水平不够
bun 内置了中国下载友好的 electron 等分发镜像。pnpm 据说省硬盘空间。我就 npm 一把梭了，下不动的包 tun 模式一开保准下的动。

[fov6363]

pnpm + rspack

[annilq]

打包可以分两种方式，bundle 和 bundless ，前者代表是 webpack 后者是 vite 。
实际开发适合不用管打包方式，比如你想用 react 或者 vue 就去 GitHub 上找个 star 比较多的 starter 下载下来改就好，现在很少有人自己配置。

[tcper]

vite 比较爽，dev server 开着的情况下，安装新包，修改配置都不用重启

[COW]

@wangtian2020 只考虑 v20+ 版本，一直用的 tun 模式，也不考虑硬盘空间，不容易出错、速度差不多就行，似乎 npm 或者 yarn 对我已经足够了？

[gorvey]

全都要，新项目注意点打包工具是可以同时存在的。

[COW]

@annilq 打包方式我想多了解，因为我实际工作会负责 cicd 这块脚本开发，如果前端打包不负责要求我可能完全无法从技术层面反驳。比如这块一般会统一用一个工具么，有没有什么限制之类的。

[gogogo1203]

国外前端开源项目里， 只要是复杂一点的，绝大部分 都用 turbo 。 我用 pnpm + turbo. Turbo 自己有打包，不过还在实验阶段。Turbo 刚开始很复杂，跑通一次以后就好了。

[annilq]

@COW #14 package.json 里面的 script 有命令，无论是什么打包方式，你只要看命令就好了

[COW]

@annilq 那我明白了

[LinYa]

@gogogo1203 turbo 和 nx 对比起来哪个合适点

[paradox8599]

版本管理我用的 vfox ，支持挺多主流语言的
包管理用的 bun ，安装速度很快
框架：nextjs + payloadcms
部署到 vercel / fly.io

话说都 docker 了就不用 pm2 了吧

[lisongeee]

打包有主要分两种，一个是打包 Web App ，另一种是打包纯 js 库

前者用 vite/webpack/rspack

后者用 unbuild/tsup/rollup

其实主要看是纯 js/ts 还是混合多文件

比如 react/vue/vite 其实都是基于 rollup 构建产物

parcel 说实话在我遇到的较新的库里基本没见过使用它的