为何前端构建工具这么麻烦

[weimo383]

被 webpack 整晕的一天。想问问后端构建工具是不是很方便🌚🌚

[michaelcheng]

前端其实可以说是面向资源开发，而不只是面向代码，所以构建这一步要处理的东西就多。

同理，就跟我们讨论后台的时候，往往会带上运维相关的内容，一样的复杂。

[abcbuzhiming]

工程化的思维是近 10 年才引入前端的，后端则早的多了，至少人月神话那个时候就开始了。前端的构建工具不够好用的根源还是时间太短，坑没踩完。不说别的就光一个 npm 设计问题，连作者都觉得设计失败的玩意还是很多人说 npm 设计的好。。。再过个 10 年，等社区对什么是真正的好，达成共识了，估计前端工程化就成熟了，现在内部意见都不统一，你觉得好的东西我觉得是屎，这种环境下工具链不可能让人满意

[shintendo]

因为前端页面的复杂化（主要是富交互化），导致越来越需要开发的工程化，工程化的方式部分模仿了后端和客户端开发，也有一些前端独有的问题需要边摸索边前进，摸索的过程中就出现了各种框架各种工具的井喷，这也是“前端三个月换一个框架”的印象的来源（实际上现在的三大框架最年轻的也已经 7 年了）。

与开发方式的工程化对应的，是作为运行环境的浏览器变化迟缓（ which 是可以理解的），于是这中间的落差就靠构建工具来弥平，构建工具把你工程化的项目吃进去，吐出最原始的、浏览器能认识的 html 、css 、js 文件。webpack 干的就是这活，又因为前述的原因，当时前端的工程化起步不久，很多东西都在摸索期，还没有沉淀出比较公认的方案，所以 webpack 的输入就各种五花八门，配置自然也就复杂了。更现代的打包工具如 vite 就简单很多。

一些人其实骨子里是看不起前端的，他们的印象还停留在十几年前切图轮播验表单的 the good old days，拒绝接受前端居然胆敢变成一门需要他们正儿八经坐下来学习的技术。所以他们面对前端开发的复杂化时，能想到的解释就是“故弄玄虚，简单问题复杂化，提高后来者的入门门槛”。说真的，大家都是写业务的打工仔，你会有闲心为了提高行业入门门槛而故意选择复杂难用的技术吗？前端要有这凝聚力，还至于跟你们一起 996 ？

[tabris17]

不难怎么堆 KPI

[ZxBing0066]

前端构建

需要打包的资源包括但不限于：js 、css 、html 、json 、图片、文本、字体

每种资源对应的类型包括但不限于：
js：es3 、es5 、es6 、es6+、ts 、coffee
css：css 、sass 、scss 、less
html：html 、template
json：json 、jsonc
图片：jpg 、png 、gif
字体：各种字体类型

各种模块引用方式兼容：amd 、cjs 、global 、esm 、dynamic import

各种语法支持

前端打包需要解决的问题包括但不限于：
整合资源、压缩体积、预处理代码、兼容处理、分包优化、首屏优化、动态加载优化

总结：环境使然，真没那么多人有空给别人找事

[whyso]

构建？是编译吗？ go build 拖拽文件就完了啊

[erlking]

有多少公司的项目真的复杂到需要用 Webpack ？一般情况下有什么是 CRA, ng-cli, vue-cli 搞不定的？

[runze]

主要是 webpack 麻烦，不用 webpack 会简单得多

[mtmzorro]

@QHKZ haha 感谢承包了我今日的笑点，形象。

[gBurnX]

@xsen

合格的后端是吧？来，解释一下，我之前的问题，与 docker 有什么关系？

[fenglangjuxu]

我也觉得 所以我现在对 前端的技术 很抵制 不愿意去学 和接触
比较喜欢偏原生的一些 html 项目

[lancelock]

不都有脚手架？大部分都不用自己配吧

[anguiao]

没那么复杂的需求就不要直接用 webpack 了，一般都有现成的脚手架，直接用就行。
或者直接抛弃 webpack，用更现代的构建工具，比如 vite 。

[pacexy1]

为什么 Chromium 这么复杂？不就是显示个网页吗？
为什么 VSCode 这么复杂？不就是在网页里写个 textarea 吗？

[libook]

工具是用来解决问题的，不是用来制造麻烦的，所以如果真的有需求要用某个工具来满足，就用，没有的话也不必硬上，很多简单交互页面用原生 JS 和 WebAPI 写起来也很方便，最新的原生 Web API 功能多得令人惊讶，更别提 WebComponent 这种可以一定程度上替代框架的东西，就算用框架也可以用 CDN 模式（ Vue 就有这种用法，不需要任何打包工具），以及 Bulma 之类的纯 CSS 样式框架。不光前端，各个技术栈都是这样的。

另外，一个东西如果没学明白的话，一定会有一种它复杂和难用的错觉（比如 C++语言、后端经典的 JavaEE ），Webpack 的 loader 和 plugin 搞明白了其实也就那么回事。

没有人喜欢大而笨重的东西，但凡是具有一定规模的前端项目都是囊括了各种角度刁钻的产品需求（特别是各种奇葩的浏览器兼容），不站在巨人的肩膀上纯靠手撸早就饿死了。

[magicdawn]

裸 webpack 很麻烦，用个 wrapper 就好了
我推荐 https://poi.js.org/

[fkdog]

个人觉得从 jquery 时代过来的前端开发普遍缺乏工程化思想, 外加浏览器兼容原因, 导致前端工程化工具发展的初期, 各门派林立质量参差不齐.

过了初期以后, 前端的各种构建工具普遍成型, 各个工具希望通过兼容对手工具的方式来抢夺用户, 于是工具配置开始复杂化.

最后就是各种遗留问题了.

现在基本很少会有前端去纠结这类配置问题, 因为现在前端应用基本都是 vue 、reactjs, 他们都已经做好了相关的脚手架让你直接上手, 你只需要打命令 build 就行.

[nicevar]

主要是前期不够专业，想法又多，屎山堆得差不多了，谁来都解决不了，github 有意思的现象就是一个前端的项目一大堆的 issue 都是无法构建

[rekulas]

@yitingbai

[shakukansp]

本质是前端没有办法知道你写的代码最终运行的环境是什么，只能兼容

你写后端的时候最后部署在哪会没有 B 数吗