首先声明下本人前端纯小白（勿喷）。最近想随便写点东西玩玩，熟悉下前端技术栈，目前用 nvm 管理 node 版本，已经确定了 v20+，为了避免踩坑，想咨询下前端技术栈相关的最佳实践。
包管理器有 n 种选择，npm、yarn、pnpm、bun，还有个包管理器的管理器 corepack😓，似乎用 corepack 然后随便 enable 一个就够了？
服务端渲染场景用 next 还是 nuxt 呢（似乎 vue 上手简单点），然后用 docker + pm2 管理？
打包构建工具又有 webpack、rollup、vite、parcel 各种选择，哪个简单又强大呢？
34 条回复 • 2024-12-04 23:51:27 +08:00
 |
1
lanisle 15 小时 42 分钟前
找几个热门的开源项目不就有的参考了。
|
 |
2
qW7bo2FbzbC0 15 小时 38 分钟前
从 0 开始 react ，我用的 vite + react-router
|
 |
3
abc1310054026 15 小时 38 分钟前
新手别考虑这么多，npm + vue/react + vite/webpack 就够了。后面的根据你自己的需求学习/使用。
没有所谓“完美”的方案，都是根据自身需求选择的。 |
 |
4
liaozzzzzz 15 小时 35 分钟前 via iPhone
个人习惯
nvm：管理 node 版本 nrm：管理镜像源 pnpm：管理依赖 vite：打包 框架：vue （ nuxt ）、react （ next ）、node （ nest ） |
 |
5
PTLin 15 小时 35 分钟前
跟着脚手架走
|
 |
6
duanxianze 15 小时 35 分钟前
想的太多了，纯小白直接 html js css 上手写就是了
|
 |
7
COW OP @duanxianze 也不算新手，我几年前之前用 jq 写过简单前端项目，只是没用 vue react 这种框架
|
 |
8
wangtian2020 15 小时 27 分钟前  1
公司前端我说了算，我就 node@22+npm+vite@5+vue@3 上去干
nvm 我都不需要，老项目不归我管。 vite 就是用的 rollup 打包的。 一定一定要记得，老项目别用 node-sass 了用 dart-sass ，还被 node-sass 弄的要切 node 版本的只能说前端水平不够 bun 内置了中国下载友好的 electron 等分发镜像。pnpm 据说省硬盘空间。我就 npm 一把梭了，下不动的包 tun 模式一开保准下的动。 |
 |
9
fov6363 15 小时 26 分钟前
pnpm + rspack
|
 |
10
annilq 15 小时 25 分钟前 1
打包可以分两种方式，bundle 和 bundless ，前者代表是 webpack 后者是 vite 。
实际开发适合不用管打包方式，比如你想用 react 或者 vue 就去 GitHub 上找个 star 比较多的 starter 下载下来改就好，现在很少有人自己配置。 |
 |
11
tcper 15 小时 25 分钟前
vite 比较爽，dev server 开着的情况下，安装新包，修改配置都不用重启
|
|
12
COW OP @wangtian2020 只考虑 v20+ 版本，一直用的 tun 模式，也不考虑硬盘空间，不容易出错、速度差不多就行，似乎 npm 或者 yarn 对我已经足够了？
|
 |
13
gorvey 15 小时 14 分钟前
全都要，新项目注意点打包工具是可以同时存在的。
|
|
14
COW OP @annilq 打包方式我想多了解，因为我实际工作会负责 cicd 这块脚本开发，如果前端打包不负责要求我可能完全无法从技术层面反驳。比如这块一般会统一用一个工具么，有没有什么限制之类的。
|
 |
15
gogogo1203 15 小时 13 分钟前
国外前端开源项目里， 只要是复杂一点的，绝大部分 都用 turbo 。 我用 pnpm + turbo. Turbo 自己有打包，不过还在实验阶段。Turbo 刚开始很复杂，跑通一次以后就好了。
|
 |
18
LinYa 15 小时 2 分钟前
@gogogo1203 turbo 和 nx 对比起来哪个合适点
|
 |
19
paradox8599 14 小时 52 分钟前 via Android
版本管理我用的 vfox ，支持挺多主流语言的
包管理用的 bun ，安装速度很快 框架：nextjs + payloadcms 部署到 vercel / fly.io 话说都 docker 了就不用 pm2 了吧 |
 |
20
lisongeee 14 小时 50 分钟前
打包有主要分两种，一个是打包 Web App ，另一种是打包纯 js 库
前者用 vite/webpack/rspack 后者用 unbuild/tsup/rollup 其实主要看是纯 js/ts 还是混合多文件 比如 react/vue/vite 其实都是基于 rollup 构建产物 parcel 说实话在我遇到的较新的库里基本没见过使用它的 |
 |
21
importmeta 14 小时 50 分钟前
没有完美的只有合适的, 我用 Astro, Vite, 不用 Next Nuxt.
作为一个见证打包器工具从无到有的人, 我已经累了, 实在是不想折腾各种打包器各种配置了. 我选 Vite , 功能强大, 心智负担较低. |
|
22
importmeta 14 小时 47 分钟前
以前觉得自己会配置打包器觉得很牛逼, 还为了面试看打包器原理, 到现在出现了各种打包器, 突然觉得自己像个啥子一样, 找一个人人多的用就完了.
|
 |
23
yhxx 14 小时 33 分钟前 1
主流并且时尚一点，pnpm+rsbuild
|
 |
24
apades 14 小时 31 分钟前
parcel 这玩意都没几个用的，这东西自带坑，不支持 package 的 exports 字段，需要那个包主动加 @parcel/resolver-default": {"packageExports": true}😅推荐直接 vite ，配置最简单了
|
 |
25
vkleo 14 小时 28 分钟前
开发环境工具：pnpm,chsrc,nvm
吃饭工具：vite,vue3 css：dart-sass ，不过最近这货变态，@import 不给用了，颜色得用 @use "sass:color"和对应方法，搞得我几年的自用 css 工具类疯狂警告 |
 |
26
qwertyzzz 14 小时 0 分钟前
vite+vue3+tailwindcss 一把梭
|
 |
27
SchwarzeR 13 小时 51 分钟前 1
我觉得比起罗列各种名词不如推荐一个还可以的开源项目直接看作者是如何实践的
vite-vue3-ts 的 web 系我推荐看看这个，不敢说小而美但是该有的都有 https://github.com/vbenjs/vue-vben-admin |
|
28
gogogo1203 13 小时 48 分钟前
@LinYa 我肯定无脑 turbo. 我关注的那几个用的都是 turbo. 直接拔下来用就行了。
|
 |
29
lukeding9627 13 小时 48 分钟前
框架:react 、next 、nest 、qiankun
工具：turbo 、webpack 、vite node 管理: volta npm 镜像管理:yrm css: tailwindcss 流水线: jetbrains teamcity |
 |
30
Immortal 13 小时 16 分钟前
提醒下各位
nvm 巨影响 shell 的载入速度,有很多更优选,比如 mise/fnm/volta |
 |
31
lyon95 12 小时 53 分钟前
@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 "$@" } |
 |
32
wu67 12 小时 36 分钟前
|
 |
33
Plumbiu 6 小时 59 分钟前
js 库或者 react 、vue 组件用 rollup
web app 就用 vite 好了 |
Select Language