V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
afeiche
V2EX  ›  Node.js

现在前端打包现在都用什么工具?求推荐

  •  
  •   afeiche · 39 天前 · 4394 次点击
    这是一个创建于 39 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我是后端,小公司接手了个 node 项目,需要做一个前端的 demo ,里面有个 node 的依赖,感觉以前的<script>引入 js 都不能用了,看了一圈,现在前端都得打包了,什么 webpack ,vite ,gulp ,不知道大家推荐用哪一个打包工具?
    31 条回复    2022-07-01 23:54:45 +08:00
    yunye
        1
    yunye  
       39 天前
    vite
    rabbbit
        2
    rabbbit  
       39 天前
    网站 webpack vite
    组件 /包 rollup
    DingJZ
        3
    DingJZ  
       39 天前   ❤️ 2
    这个描述没看懂,项目的运行环境到底是浏览器还是 node 。
    如果是浏览器,完全可以不考虑那些,用你熟悉的方式搞就可以;
    如果是 node ,简单来说都不需要打包,反正是服务端运行
    hervey0424
        4
    hervey0424  
       39 天前   ❤️ 2
    zip
    learningman
        5
    learningman  
       39 天前
    esbuild
    zixiCat
        6
    zixiCat  
       39 天前 via Android
    folder
    DOLLOR
        7
    DOLLOR  
       39 天前   ❤️ 1
    你先搞清楚你的项目到底是 web 前端项目,还是 node 项目。

    实在不懂就 npm install ,npm run build 就完事了。
    cyberpoint
        8
    cyberpoint  
       39 天前
    @DingJZ 正解
    hzxxx
        9
    hzxxx  
       39 天前   ❤️ 1
    现在的开发就是喜欢搞一大堆东西来提高门槛来内卷
    Oktfolio
        10
    Oktfolio  
       39 天前
    IBM Semeru Runtimes (OpenJ9)
    Amazon Corretto 17
    Oktfolio
        11
    Oktfolio  
       39 天前
    @Oktfolio 发错地方了...
    mobyride
        12
    mobyride  
       39 天前 via iPhone
    yarn build
    qrobot
        13
    qrobot  
       39 天前   ❤️ 7
    @hzxxx 那我问一下

    - 浏览器不支持 call?.() 这种语法糖怎么办?
    - React 用 createElement 一直写下去确定不嫌弃麻烦吗?
    - 是不是每个浏览器的兼容性问题都要自己去写 polyfill ?
    - 代码的 tree shaking 怎么实现?
    - 代码的 code splitting 怎么实现?
    - 代码的库的递归依赖怎么解决? 例如 Antd 依赖 React , 你的项目也依赖 React 这种依赖怎么解决,直接引入吗?

    请给我一个解决方案, 别告诉这些都不用做,前端只负责写一个 HTML 页面就好了,不需要 css/js 库, 也不需要解决依赖管理的问题?
    qrobot
        14
    qrobot  
       39 天前
    @hzxxx 你了解一下 google web toolkit 就知道,如果 web 开发要发展, 把 js 当作汇编语言进行语法解析树分析是必然的过程, 如果你觉得这是为了提高所谓的门槛,我只能说这种门槛也太低了
    jinliming2
        15
    jinliming2  
       39 天前
    https://parceljs.org/
    直接 html script 一个 入口 js 文件,其他的都不用管了。
    codingBug
        16
    codingBug  
       39 天前 via Android
    esbuild 和 rollup ,或者直接选用 vite 进行开发
    um1ng
        17
    um1ng  
       39 天前
    vitejs 现在支持 vue 和 react 都很友好了
    bojue
        18
    bojue  
       39 天前
    @hzxxx 感觉有点做题家的策略,对于技术的热爱有点近乎偏执的目的性,对于软件本身的功能和体验都没人关注了
    DOLLOR
        19
    DOLLOR  
       39 天前
    @hzxxx
    反了吧,正因为这些东西降低了门槛,吸引更多的人来内卷。
    xieqiqiang00
        20
    xieqiqiang00  
       39 天前
    最流行的是 webpack ,我就这么说吧
    fox0001
        21
    fox0001  
       38 天前 via Android
    @hzxxx #9 以前我就想,jQuery 不能用吗,弄那么多前端框架,闲着蛋疼吧。用过 VUE 后,嗯,真香~😂
    hzxxx
        22
    hzxxx  
       38 天前
    @qrobot 内卷的人是我讨厌的,你这样的也是我讨厌的,上来就苦大仇深的,跟我欠你几百万不还一样,还趾高气昂的,我看着就讨厌,你有看题主写的什么东西,题主问打包工具这么多,选哪一个,给你点赞的估计也是玻璃心,不会回你这样的了
    sjhhjx0122
        23
    sjhhjx0122  
       38 天前
    @hzxxx 但你的回复也不是告诉题主那个构建工具好啊,而且我也不认同你说的前端工具是提高门槛内卷,只是自然发展的必要
    libook
        24
    libook  
       38 天前
    打包工具不是必需的,如果只是做个 demo ,很可能不需要打包。

    用了打包工具,最终还是需要在 html 里插 script 标签引入 JS 。

    非要用的话就看自己用的框架有没有自带打包工具的脚手架,直接用自带的就行,没必要浪费时间亲自去配置。
    duan602728596
        25
    duan602728596  
       38 天前
    小项目用 vite ,编译快,编译出来的是 esm 代码。
    大项目用 webpack ,插件多,编译的代码兼容性强(指的是 webpack 自身的代码)。
    组件用 rollup ,编译出来的代码少,支持各种模块化方案。
    gulp 是自动化构建工具,支持多任务并行或者串行执行,相当于流水线的工作方式。
    cweijan
        26
    cweijan  
       38 天前
    @hzxxx 前端是最近发展快, 现在的工具大大的提高了效率
    afeiche
        27
    afeiche  
    OP
       38 天前
    @libook 主要是依赖的开源库需要用 import 引入,还带了一堆的依赖,然后我就抓虾了,看了一下 mdn ,浏览器自带的 import 应该没有解决怎么递归依赖,估计还是得用打包工具,我看了一下项目 demo 是用 gulp 的。
    ps:楼上的各位也不用争论,我理解每个领域都是在发展的,我以前还会用 jquery 写一些比较简单的前端功能,现在估计得从头学才能掌握,只能说前端也越来越工程化了,以前前端讲究的是切图,理解 dom 结构,掌握浏览器渲染的规则,现在可能更偏向于脚手架了。
    libook
        28
    libook  
       38 天前
    @afeiche #26 现代浏览器应该是支持 script 标签的 type=module ,递归依赖也是支持的,浏览器在遇到 import 指令的时候会去按照路径请求对应的 js 文件,你可以试试。

    具体可以参考这个 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

    当然,如果依赖是用 require 来引用的话,就必须用打包工具合并或转换一下了。
    afeiche
        29
    afeiche  
    OP
       38 天前
    @libook 我看了一下,开源库是用 ts 写的,然后引入用的是 import ,引入的时候没有后缀,直接是文件名:
    import { EnhancedEventEmitter } from './EnhancedEventEmitter';
    这种是不是也只能够用打包工具了?
    libook
        30
    libook  
       38 天前
    @afeiche #28 额,TS 是必须要转成 JS 才能运行的,横竖都得处理代码的话,估计用打包工具会方便一些。
    anguliuyun
        31
    anguliuyun  
       38 天前
    @Oktfolio 哈哈 这是 Java17 选什么供应商那个主题吧
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1241 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:58 · PVG 06:58 · LAX 15:58 · JFK 18:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.