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

[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 说实话在我遇到的较新的库里基本没见过使用它的

[importmeta]

没有完美的只有合适的, 我用 Astro, Vite, 不用 Next Nuxt.
作为一个见证打包器工具从无到有的人, 我已经累了, 实在是不想折腾各种打包器各种配置了.
我选 Vite , 功能强大, 心智负担较低.

[importmeta]

以前觉得自己会配置打包器觉得很牛逼, 还为了面试看打包器原理, 到现在出现了各种打包器, 突然觉得自己像个啥子一样, 找一个人人多的用就完了.

[yhxx]

主流并且时尚一点，pnpm+rsbuild

[apades]

parcel 这玩意都没几个用的，这东西自带坑，不支持 package 的 exports 字段，需要那个包主动加 @parcel/resolver-default": {"packageExports": true}😅推荐直接 vite ，配置最简单了

[vkleo]

开发环境工具：pnpm,chsrc,nvm
吃饭工具：vite,vue3
css：dart-sass ，不过最近这货变态，@import 不给用了，颜色得用 @use "sass:color"和对应方法，搞得我几年的自用 css 工具类疯狂警告

[qwertyzzz]

vite+vue3+tailwindcss 一把梭

[SchwarzeR]

我觉得比起罗列各种名词不如推荐一个还可以的开源项目直接看作者是如何实践的

vite-vue3-ts 的 web 系我推荐看看这个，不敢说小而美但是该有的都有
https://github.com/vbenjs/vue-vben-admin

[gogogo1203]

@LinYa 我肯定无脑 turbo. 我关注的那几个用的都是 turbo. 直接拔下来用就行了。

[lukeding9627]

框架:react 、next 、nest 、qiankun
工具：turbo 、webpack 、vite
node 管理: volta
npm 镜像管理:yrm
css: tailwindcss
流水线: jetbrains teamcity

[Immortal]

提醒下各位
nvm 巨影响 shell 的载入速度,有很多更优选,比如 mise/fnm/volta

[lyon95]

@Immortal #30 这个问题是可以解决的


# nvm 默认的配置会使得每次打开 iterm 都很慢，需要改成按需加载
export NVM_DIR="$HOME/.nvm"
# 本来每次启动 terminal 的时候都需要执行下面两行代码的
#[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
#[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

function _install_nvm() {
unset -f nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This sets up nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # load nvm bash_completion
nvm "$@"
}

function nvm() {
_install_nvm "$@"
}

[wu67]

@Immortal
@lyon95

我选择自己配环境变量, 需要切版本时用命令切过去就好了.

alias node16="export PATH=$HOME/Applications/node16/bin:$PATH"
alias nodelts="export PATH=$HOME/Applications/node/bin:$PATH"

export PATH=$HOME/Applications/node/bin:$PATH

[Plumbiu]

js 库或者 react 、vue 组件用 rollup
web app 就用 vite 好了

[Immortal]

@lyon95 #31
确实有很多方法来缓解
但 nvm 本身这种 shell 实现我觉得已经不是最优解了,只是因为出现的早