这是一个创建于 1198 天前的主题，其中的信息可能已经有所发展或是发生改变。
我是后端，小公司接手了个 node 项目，需要做一个前端的 demo ，里面有个 node 的依赖，感觉以前的<script>引入 js 都不能用了，看了一圈，现在前端都得打包了，什么 webpack ，vite ，gulp ，不知道大家推荐用哪一个打包工具？
 | 1 yunye 2022-06-30 18:20:37 +08:00 vite |
 | 2 rabbbit 2022-06-30 18:21:27 +08:00 网站 webpack vite 组件 /包 rollup |
 | 3 DingJZ 2022-06-30 18:37:18 +08:00  2 这个描述没看懂，项目的运行环境到底是浏览器还是 node 。 如果是浏览器，完全可以不考虑那些，用你熟悉的方式搞就可以； 如果是 node ，简单来说都不需要打包，反正是服务端运行 |
 | 4 hervey0424 2022-06-30 18:48:46 +08:00 2 zip |
 | 5 learningman 2022-06-30 18:49:34 +08:00 esbuild |
 | 6 zixiCat 2022-06-30 18:56:47 +08:00 via Android folder |
 | 7 AV1 2022-06-30 19:04:40 +08:00 1 你先搞清楚你的项目到底是 web 前端项目，还是 node 项目。 实在不懂就 npm install ，npm run build 就完事了。 |
 | 8 cyberpoint 2022-06-30 19:05:44 +08:00 @DingJZ 正解 |
 | 9 hzxxx 2022-06-30 19:25:03 +08:00 1 现在的开发就是喜欢搞一大堆东西来提高门槛来内卷 |
 | 10 Oktfolio 2022-06-30 19:47:47 +08:00 IBM Semeru Runtimes (OpenJ9) Amazon Corretto 17 |
 | 12 mobyride 2022-06-30 21:44:57 +08:00 via iPhone yarn build |
 | 13 qrobot 2022-06-30 21:47:40 +08:00 8 @hzxxx 那我问一下 - 浏览器不支持 call?.() 这种语法糖怎么办? - React 用 createElement 一直写下去确定不嫌弃麻烦吗? - 是不是每个浏览器的兼容性问题都要自己去写 polyfill ? - 代码的 tree shaking 怎么实现？ - 代码的 code splitting 怎么实现? - 代码的库的递归依赖怎么解决？ 例如 Antd 依赖 React ， 你的项目也依赖 React 这种依赖怎么解决，直接引入吗？ 请给我一个解决方案， 别告诉这些都不用做，前端只负责写一个 HTML 页面就好了，不需要 css/js 库, 也不需要解决依赖管理的问题？ |
| 14 qrobot 2022-06-30 21:52:50 +08:00 @hzxxx 你了解一下 google web toolkit 就知道，如果 web 开发要发展, 把 js 当作汇编语言进行语法解析树分析是必然的过程， 如果你觉得这是为了提高所谓的门槛，我只能说这种门槛也太低了 |
 | 15 jinliming2 2022-06-30 22:11:52 +08:00 https://parceljs.org/ 直接 html script 一个 入口 js 文件，其他的都不用管了。 |
 | 16 codingBug 2022-06-30 22:35:49 +08:00 via Android esbuild 和 rollup ，或者直接选用 vite 进行开发 |
 | 17 um1ng 2022-06-30 22:52:12 +08:00 vitejs 现在支持 vue 和 react 都很友好了 |
 | 20 xieqiqiang00 2022-06-30 23:27:05 +08:00 最流行的是 webpack ，我就这么说吧 |
 | 21 fox0001 2022-07-01 07:57:54 +08:00 via Android @hzxxx #9 以前我就想，jQuery 不能用吗，弄那么多前端框架，闲着蛋疼吧。用过 VUE 后，嗯，真香～ |
| 22 hzxxx 2022-07-01 10:42:21 +08:00 @qrobot 内卷的人是我讨厌的，你这样的也是我讨厌的，上来就苦大仇深的，跟我欠你几百万不还一样，还趾高气昂的，我看着就讨厌，你有看题主写的什么东西，题主问打包工具这么多，选哪一个，给你点赞的估计也是玻璃心，不会回你这样的了 |
 | 23 linkopeneyes 2022-07-01 11:00:18 +08:00 @hzxxx 但你的回复也不是告诉题主那个构建工具好啊，而且我也不认同你说的前端工具是提高门槛内卷，只是自然发展的必要 |
 | 24 libook 2022-07-01 11:50:27 +08:00 打包工具不是必需的，如果只是做个 demo ，很可能不需要打包。 用了打包工具，最终还是需要在 html 里插 script 标签引入 JS 。 非要用的话就看自己用的框架有没有自带打包工具的脚手架，直接用自带的就行，没必要浪费时间亲自去配置。 |
 | 25 duan602728596 2022-07-01 13:17:08 +08:00 小项目用 vite ，编译快，编译出来的是 esm 代码。 大项目用 webpack ，插件多，编译的代码兼容性强（指的是 webpack 自身的代码）。 组件用 rollup ，编译出来的代码少，支持各种模块化方案。 gulp 是自动化构建工具，支持多任务并行或者串行执行，相当于流水线的工作方式。 |
 | 27 afeiche OP @libook 主要是依赖的开源库需要用 import 引入，还带了一堆的依赖，然后我就抓虾了，看了一下 mdn ，浏览器自带的 import 应该没有解决怎么递归依赖，估计还是得用打包工具，我看了一下项目 demo 是用 gulp 的。 ps：楼上的各位也不用争论，我理解每个领域都是在发展的，我以前还会用 jquery 写一些比较简单的前端功能，现在估计得从头学才能掌握，只能说前端也越来越工程化了，以前前端讲究的是切图，理解 dom 结构，掌握浏览器渲染的规则，现在可能更偏向于脚手架了。 |
| 28 libook 2022-07-01 16:24:55 +08:00 @afeiche #26 现代浏览器应该是支持 script 标签的 type=module ，递归依赖也是支持的，浏览器在遇到 import 指令的时候会去按照路径请求对应的 js 文件，你可以试试。 具体可以参考这个 https://developer.mozilla.org/zh-CN/docs/Web/Javascript/Guide/Modules 当然，如果依赖是用 require 来引用的话，就必须用打包工具合并或转换一下了。 |
| 29 afeiche OP @libook 我看了一下，开源库是用 ts 写的，然后引入用的是 import ，引入的时候没有后缀，直接是文件名： import { EnhancedEventEmitter } from './EnhancedEventEmitter'; 这种是不是也只能够用打包工具了？ |
Select Language