前端现在主流包管理和打包构建方案是什么? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
COW
V2EX    程序员

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

  •  
  •   COW 360 天前 4722 次点击
    这是一个创建于 360 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    包管理器有 n 种选择,npmyarnpnpmbun,还有个包管理器的管理器 corepack,似乎用 corepack 然后随便 enable 一个就够了?

    服务端渲染场景用 next 还是 nuxt 呢(似乎 vue 上手简单点),然后用 docker + pm2 管理?

    打包构建工具又有 webpackrollupviteparcel 各种选择,哪个简单又强大呢?

    41 条回复    2024-12-25 15:02:05 +08:00
    lanisle
        1
    lanisle  
       360 天前
    找几个热门的开源项目不就有的参考了。
    qW7bo2FbzbC0
        2
    qW7bo2FbzbC0  
       360 天前
    从 0 开始 react ,我用的 vite + react-router
    abc1310054026
        3
    abc1310054026  
       360 天前
    新手别考虑这么多,npm + vue/react + vite/webpack 就够了。后面的根据你自己的需求学习/使用。

    没有所谓“完美”的方案,都是根据自身需求选择的。
    liaozzzzzz
        4
    liaozzzzzz  
       360 天前 via iPhone
    个人习惯
    nvm:管理 node 版本
    nrm:管理镜像源
    pnpm:管理依赖
    vite:打包
    框架:vue ( nuxt )、react ( next )、node ( nest )
    PTLin
        5
    PTLin  
       360 天前
    跟着脚手架走
    duanxianze
        6
    duanxianze  
       360 天前
    想的太多了,纯小白直接 html js css 上手写就是了
    COW
        7
    COW  
    OP
       360 天前 via Android
    @duanxianze 也不算新手,我几年前之前用 jq 写过简单前端项目,只是没用 vue react 这种框架
    wangtian2020
        8
    wangtian2020  
       360 天前   1
    公司前端我说了算,我就 node@22+npm+vite@5+vue@3 上去干

    nvm 我都不需要,老项目不归我管。
    vite 就是用的 rollup 打包的。
    一定一定要记得,老项目别用 node-sass 了用 dart-sass ,还被 node-sass 弄的要切 node 版本的只能说前端水平不够
    bun 内置了中国下载友好的 electron 等分发镜像。pnpm 据说省硬盘空间。我就 npm 一把梭了,下不动的包 tun 模式一开保准下的动。
    fov6363
        9
    fov6363  
       360 天前
    pnpm + rspack
    annilq
        10
    annilq  
       360 天前   1
    打包可以分两种方式,bundle 和 bundless ,前者代表是 webpack 后者是 vite 。
    实际开发适合不用管打包方式,比如你想用 react 或者 vue 就去 GitHub 上找个 star 比较多的 starter 下载下来改就好,现在很少有人自己配置。
    tcper
        11
    tcper  
       360 天前
    vite 比较爽,dev server 开着的情况下,安装新包,修改配置都不用重启
    COW
        12
    COW  
    OP
       360 天前 via Android
    @wangtian2020 只考虑 v20+ 版本,一直用的 tun 模式,也不考虑硬盘空间,不容易出错、速度差不多就行,似乎 npm 或者 yarn 对我已经足够了?
    gorvey
        13
    gorvey  
       360 天前
    全都要,新项目注意点打包工具是可以同时存在的。
    COW
        14
    COW  
    OP
       360 天前 via Android
    @annilq 打包方式我想多了解,因为我实际工作会负责 cicd 这块脚本开发,如果前端打包不负责要求我可能完全无法从技术层面反驳。比如这块一般会统一用一个工具么,有没有什么限制之类的。
    gogogo1203
        15
    gogogo1203  
       360 天前
    国外前端开源项目里, 只要是复杂一点的,绝大部分 都用 turbo 。 我用 pnpm + turbo. Turbo 自己有打包,不过还在实验阶段。Turbo 刚开始很复杂,跑通一次以后就好了。
    annilq
        16
    annilq  
       360 天前   1
    @COW #14 package.json 里面的 script 有命令,无论是什么打包方式,你只要看命令就好了
    COW
        17
    COW  
    OP
       360 天前 via Android
    @annilq 那我明白了
    LinYa
        18
    LinYa  
       360 天前
    @gogogo1203 turbo 和 nx 对比起来哪个合适点
    paradox8599
        19
    paradox8599  
       360 天前 via Android
    版本管理我用的 vfox ,支持挺多主流语言的
    包管理用的 bun ,安装速度很快
    框架:nextjs + payloadcms
    部署到 vercel / fly.io

    话说都 docker 了就不用 pm2 了吧
    lisongeee
        20
    lisongeee  
       360 天前
    打包有主要分两种,一个是打包 Web App ,另一种是打包纯 js 库

    前者用 vite/webpack/rspack

    后者用 unbuild/tsup/rollup

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

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

    parcel 说实话在我遇到的较新的库里基本没见过使用它的
    importmeta
        21
    importmeta  
       360 天前
    没有完美的只有合适的, 我用 Astro, Vite, 不用 Next Nuxt.
    作为一个见证打包器工具从无到有的人, 我已经累了, 实在是不想折腾各种打包器各种配置了.
    我选 Vite , 功能强大, 心智负担较低.
    importmeta
        22
    importmeta  
       360 天前
    以前觉得自己会配置打包器觉得很牛逼, 还为了面试看打包器原理, 到现在出现了各种打包器, 突然觉得自己像个啥子一样, 找一个人人多的用就完了.
    yhxx
        23
    yhxx  
       360 天前   1
    主流并且时尚一点,pnpm+rsbuild
    apades
        24
    apades  
       360 天前
    parcel 这玩意都没几个用的,这东西自带坑,不支持 package 的 exports 字段,需要那个包主动加 @parcel/resolver-default": {"packageExports": true}推荐直接 vite ,配置最简单了
    vkleo
        25
    vkleo  
       360 天前
    开发环境工具:pnpm,chsrc,nvm
    吃饭工具:vite,vue3
    css:dart-sass ,不过最近这货变态,@import 不给用了,颜色得用 @use "sass:color"和对应方法,搞得我几年的自用 css 工具类疯狂警告
    asLw0P981N0M0TCC
        26
    asLw0P981N0M0TCC  
       360 天前
    vite+vue3+tailwindcss 一把梭
    SchwarzeR
        27
    SchwarzeR  
       360 天前   1
    我觉得比起罗列各种名词不如推荐一个还可以的开源项目直接看作者是如何实践的

    vite-vue3-ts 的 web 系我推荐看看这个,不敢说小而美但是该有的都有
    https://github.com/vbenjs/vue-vben-admin
    gogogo1203
        28
    gogogo1203  
       360 天前   1
    @LinYa 我肯定无脑 turbo. 我关注的那几个用的都是 turbo. 直接拔下来用就行了。
    lukeding9627
        29
    lukeding9627  
       360 天前
    框架:react 、next 、nest 、qiankun
    工具:turbo 、webpack 、vite
    node 管理: volta
    npm 镜像管理:yrm
    css: tailwindcss
    流水线: jetbrains teamcity
    Immortal
        30
    Immortal  
       360 天前   1
    提醒下各位
    nvm 巨影响 shell 的载入速度,有很多更优选,比如 mise/fnm/volta
    lyon95
        31
    lyon95  
       360 天前
    @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
        32
    wu67  
       360 天前
    @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
        33
    Plumbiu  
       360 天前
    js 库或者 react 、vue 组件用 rollup
    web app 就用 vite 好了
    Immortal
        34
    Immortal  
       359 天前
    @lyon95 #31
    确实有很多方法来缓解
    但 nvm 本身这种 shell 实现我觉得已经不是最优解了,只是因为出现的早
    jqtmviyu
        35
    jqtmviyu  
       359 天前
    pnpm + vite

    npm 只装全局包
    Curtion
        36
    Curtion  
       359 天前
    @Immortal #30 volta 遇到 packageManager 会有循环依赖的问题,因为这个我已经换成 fnm 了。https://github.com/volta-cli/volta/issues/1293
    horizon
        37
    horizon  
       359 天前
    @paradox8599 #19
    老哥 payloadcms 用的什么版本
    paradox8599
        38
    paradox8599  
       359 天前 via Android
    @horizon #37
    最近出 3.0 才看到的,之前一直在用 keystonejs
    lanten
        39
    lanten  
       359 天前
    构建工具只有两个选择:vite 和 rsbuild ,全新项目选 vite, 兼容 webpack 的老项目选择 rsbuild

    包管理器只有一个选择:npm
    非官方的包管理器只会让你的项目变成一坨答辩
    COW
        40
    COW  
    OP
       359 天前 via Android
    @lanten 昨天试了下,其他几个包管理器的 Nuxt 官方示例都没 run 起来,只有 npx 一次成功,懒得折腾了,现在正在用 vite 和 npm ♀。
    seekafter
        41
    seekafter  
       339 天前
    pnpm + nuxt + vite
    我自己开发东西就用这个, 做个小工具比较快
    nuxt 还能写后端 api,一把梭了
    公司里就跟着你们的老项目来就行
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2629 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 29ms UTC 14:46 PVG 22:46 LAX 06:46 JFK 09:46
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86