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

[COW]

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

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

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

打包构建工具又有 webpack、rollup、vite、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 实现我觉得已经不是最优解了,只是因为出现的早

[jqtmviyu]

pnpm + vite

npm 只装全局包

[Curtion]

@Immortal #30 volta 遇到 packageManager 会有循环依赖的问题，因为这个我已经换成 fnm 了。https://github.com/volta-cli/volta/issues/1293

[horizon]

@paradox8599 #19
老哥 payloadcms 用的什么版本

[paradox8599]

@horizon #37
最近出 3.0 才看到的，之前一直在用 keystonejs

[lanten]

构建工具只有两个选择：vite 和 rsbuild ，全新项目选 vite, 兼容 webpack 的老项目选择 rsbuild

包管理器只有一个选择：npm
非官方的包管理器只会让你的项目变成一坨答辩

[COW]

@lanten 昨天试了下，其他几个包管理器的 Nuxt 官方示例都没 run 起来，只有 npx 一次成功，懒得折腾了，现在正在用 vite 和 npm 🤷‍♀️。