这是一个创建于 871 天前的主题，其中的信息可能已经有所发展或是发生改变。
我是后端，小公司接手了个 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
DOLLOR 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
sjhhjx0122 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'; 这种是不是也只能够用打包工具了？ |
 |
31
anguliuyun 2022-07-01 23:54:45 +08:00
@Oktfolio 哈哈 这是 Java17 选什么供应商那个主题吧
|
Select Language