[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-nodejs-in-frontend-dev":3,"$fc6gt4bi65pud":20},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":12,"permalink":13,"excerpt_src":13,"media_type":13,"media_title":13,"media_author":13,"media_url":13,"rating":13,"layout":13,"pv":14,"admin_only":14,"created_at":15,"updated_at":15,"deleted_at":13,"status":16,"html":17,"excerpt":18,"cover":19},189,"article","nodejs-in-frontend-dev","【问答】为什么前端越来越复杂？Node.js有什么作用？","2020-03-18 23:47","web",[11],"Node.js","\n本文来自知乎问题：[为什么要把前端搞的这么复杂，UI 组件不是很好用吗， 难道就是为了推广 nodejs 和 npm 吗?](https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F378533373\u002Fanswer\u002F1088512439)\n\n这个题目中有无数槽点：\n\n画个界面只要快就好了吗？JS类库能帮你解决渲染慢的问题？类库和组件能帮你解决所有的兼容问题？不需要高并发所以就不需要架构？\n\n这里的每一条都值得展开来反驳，但鉴于题主的主要疑问不在这里，就不跑题。\n\n这个问题的核心，抽取一下就是两个：\n\n1. 为什么前端越来越复杂了\n2. Node.js在前端开发中是干什么的\n\n\u003C!-- more -->\n\n先回答第2个问题。在前端开发中，现在的确基本上都会使用Node.js，但事实上，绝大部分前端工程师只是需要安装一下Node.js而已，一行Node.js代码都不用写。因此Node.js在这里只是一个工具平台，它为前端各种工程化的工具提供一个可执行的环境，仅此而已。打个不是特别恰当的比喻，很多软件在安装的时候都需要编译，编译过程中需要python，这个时候你要做的仅仅是安装一下python，并不需要写python代码。\n\n第1个问题，前端为什么越来越复杂了。\n\n比较欣慰的是，题主好歹说了“代码分布合理，清晰”，要不然实在是聊不下去。JS作为一个20多年的语言，在语言特性上是缺失很多现代软件工程的特性的，典型的就是模块化。你写Java，一个文件就是一个文件，一个包就是一个包，跨文件跨包的代码不会有互相影响吧？要引用只需要import一下就好了吧？那JS呢？\n\nJS的模块化从AMD诞生开始，一直到Node.js的CommonJS规范，中间有十年左右的时间是没有官方方案的，全靠社区想各种办法，从一开始的命名空间，到AMD\u002FCommonJS，全都不是语言层面的官方支持。而这些规范中，只有AMD可以在不编译的情况下运行，CommonJS直到今天都是不可以直接在浏览器中使用的，所以“编译”的第一个用处，在这里——解决JS模块化的问题。\n\n即使AMD可以不编译直接在浏览器中运行，也会面临另一个问题：文件碎片化。大家都是喜欢组织代码的程序员，一旦模块可以不互相影响了，那一定会导致原来在同一个文件中的代码被拆分成更多的子模块。于是有可能你一个页面就要加载几十上百个JS文件（一个文件一个模块），于是你仍然要想办法把它们进行合并打包，于是“编译”的第二个用处出现——合并JS文件，减少HTTP请求。\n\n好了，再回到题主题到的UI组件库和JS类库。这些东西基本上都不是你自己开发的对吗？意味着你要使用别人的代码。那么问题来了，你要如何引入别人的代码？在java中，你可以用marven，在前端代码中呢？你自然可以直接复制代码到项目中，但你要如何管理呢？难道包管理是只有java程序员可以用，并不是呀，写windows的写mac的写android的写ios的都可以用包管理来引入第三方的代码，凭什么写前端的不能这么干呢？于是有了bower，但是bower死了，只剩下了npm。所以npm就成了前端御用的包管理软件。那你下载这么多包了，在代码中要怎么找到这些包？require('jquery')怎么就能找到node_modules\u002Fjquery\u002Fdist\u002Fjquery.min.js呢，又要怎么变成浏览器可访问的呢？于是“编译”的第三个用处出现——可复用软件包的寻址。\n\n“编译”当然还有第四个用处，那就是处理兼容性。这里的兼容性和题主理解的UI组件\u002FJS类库处理的兼容器不是一回事，主要是指语言的兼容性。ES5之后ES6 7 8 9一直在不断出现，JSX、TypeScript等新玩意也在不断出现，但问题是浏览器并不支持或并不完全支持这些玩意，那就不能玩了吗？要等所有浏览器都支持再玩吗？能通过编译一下让大家都愉快地玩起来，何乐而不为？\n\n还有第五个用处吗？有的呢，有了编译，意味着代码的组织有更多可能性，你会看到Vue单文件组件，你会看到Web Components的代码，你会看到在JS中引入CSS的用法，你会看到styled components \u002F scoped css \u002F css modules等等各种神奇的玩法。然而归根结底，他们在做什么，无非是在追求题主所说的“代码分布合理、清晰”。\n\n代码这个世界之所以好玩，就是因为你可以玩出花，而不是被别人限制，对不起，你只能这么玩。\n\n题主觉得用UI组件库\u002FJS类库对前端来说就足够了，但是对前端工程师来说，对不起，这不是我们想玩的玩法，我们就想让前端也可以更好玩一些，不要天天去羡慕做别的语言\u002F平台的工程师。作为一个局外人，你可以不理解，你也可以选择你认为舒服的方式，但是请不要随意质疑别人觉得舒服的方式。\n\n写个HTML，放个jQuery，放个bootstrap，$.ajax()写起来，没有人会鄙视你的。但是我vue-cli \u002F npm install \u002F npm run dev，也不要鄙视我好吗？大家各自开心。\n",null,0,"2026-08-28 04:37:17","published","\u003Cp>本文来自知乎问题：\u003Ca href=\"https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F378533373\u002Fanswer\u002F1088512439\">为什么要把前端搞的这么复杂，UI 组件不是很好用吗， 难道就是为了推广 nodejs 和 npm 吗?\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>这个题目中有无数槽点：\u003C\u002Fp>\n\u003Cp>画个界面只要快就好了吗？JS类库能帮你解决渲染慢的问题？类库和组件能帮你解决所有的兼容问题？不需要高并发所以就不需要架构？\u003C\u002Fp>\n\u003Cp>这里的每一条都值得展开来反驳，但鉴于题主的主要疑问不在这里，就不跑题。\u003C\u002Fp>\n\u003Cp>这个问题的核心，抽取一下就是两个：\u003C\u002Fp>\n\u003Col>\n\u003Cli>为什么前端越来越复杂了\u003C\u002Fli>\n\u003Cli>Node.js在前端开发中是干什么的\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>先回答第2个问题。在前端开发中，现在的确基本上都会使用Node.js，但事实上，绝大部分前端工程师只是需要安装一下Node.js而已，一行Node.js代码都不用写。因此Node.js在这里只是一个工具平台，它为前端各种工程化的工具提供一个可执行的环境，仅此而已。打个不是特别恰当的比喻，很多软件在安装的时候都需要编译，编译过程中需要python，这个时候你要做的仅仅是安装一下python，并不需要写python代码。\u003C\u002Fp>\n\u003Cp>第1个问题，前端为什么越来越复杂了。\u003C\u002Fp>\n\u003Cp>比较欣慰的是，题主好歹说了“代码分布合理，清晰”，要不然实在是聊不下去。JS作为一个20多年的语言，在语言特性上是缺失很多现代软件工程的特性的，典型的就是模块化。你写Java，一个文件就是一个文件，一个包就是一个包，跨文件跨包的代码不会有互相影响吧？要引用只需要import一下就好了吧？那JS呢？\u003C\u002Fp>\n\u003Cp>JS的模块化从AMD诞生开始，一直到Node.js的CommonJS规范，中间有十年左右的时间是没有官方方案的，全靠社区想各种办法，从一开始的命名空间，到AMD\u002FCommonJS，全都不是语言层面的官方支持。而这些规范中，只有AMD可以在不编译的情况下运行，CommonJS直到今天都是不可以直接在浏览器中使用的，所以“编译”的第一个用处，在这里——解决JS模块化的问题。\u003C\u002Fp>\n\u003Cp>即使AMD可以不编译直接在浏览器中运行，也会面临另一个问题：文件碎片化。大家都是喜欢组织代码的程序员，一旦模块可以不互相影响了，那一定会导致原来在同一个文件中的代码被拆分成更多的子模块。于是有可能你一个页面就要加载几十上百个JS文件（一个文件一个模块），于是你仍然要想办法把它们进行合并打包，于是“编译”的第二个用处出现——合并JS文件，减少HTTP请求。\u003C\u002Fp>\n\u003Cp>好了，再回到题主题到的UI组件库和JS类库。这些东西基本上都不是你自己开发的对吗？意味着你要使用别人的代码。那么问题来了，你要如何引入别人的代码？在java中，你可以用marven，在前端代码中呢？你自然可以直接复制代码到项目中，但你要如何管理呢？难道包管理是只有java程序员可以用，并不是呀，写windows的写mac的写android的写ios的都可以用包管理来引入第三方的代码，凭什么写前端的不能这么干呢？于是有了bower，但是bower死了，只剩下了npm。所以npm就成了前端御用的包管理软件。那你下载这么多包了，在代码中要怎么找到这些包？require('jquery')怎么就能找到node_modules\u002Fjquery\u002Fdist\u002Fjquery.min.js呢，又要怎么变成浏览器可访问的呢？于是“编译”的第三个用处出现——可复用软件包的寻址。\u003C\u002Fp>\n\u003Cp>“编译”当然还有第四个用处，那就是处理兼容性。这里的兼容性和题主理解的UI组件\u002FJS类库处理的兼容器不是一回事，主要是指语言的兼容性。ES5之后ES6 7 8 9一直在不断出现，JSX、TypeScript等新玩意也在不断出现，但问题是浏览器并不支持或并不完全支持这些玩意，那就不能玩了吗？要等所有浏览器都支持再玩吗？能通过编译一下让大家都愉快地玩起来，何乐而不为？\u003C\u002Fp>\n\u003Cp>还有第五个用处吗？有的呢，有了编译，意味着代码的组织有更多可能性，你会看到Vue单文件组件，你会看到Web Components的代码，你会看到在JS中引入CSS的用法，你会看到styled components \u002F scoped css \u002F css modules等等各种神奇的玩法。然而归根结底，他们在做什么，无非是在追求题主所说的“代码分布合理、清晰”。\u003C\u002Fp>\n\u003Cp>代码这个世界之所以好玩，就是因为你可以玩出花，而不是被别人限制，对不起，你只能这么玩。\u003C\u002Fp>\n\u003Cp>题主觉得用UI组件库\u002FJS类库对前端来说就足够了，但是对前端工程师来说，对不起，这不是我们想玩的玩法，我们就想让前端也可以更好玩一些，不要天天去羡慕做别的语言\u002F平台的工程师。作为一个局外人，你可以不理解，你也可以选择你认为舒服的方式，但是请不要随意质疑别人觉得舒服的方式。\u003C\u002Fp>\n\u003Cp>写个HTML，放个jQuery，放个bootstrap，$.ajax()写起来，没有人会鄙视你的。但是我vue-cli \u002F npm install \u002F npm run dev，也不要鄙视我好吗？大家各自开心。\u003C\u002Fp>\n","\u003Cp>本文来自知乎问题：\u003Ca href=\"https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F378533373\u002Fanswer\u002F1088512439\">为什么要把前端搞的这么复杂，UI 组件不是很好用吗， 难道就是为了推广 nodejs 和 npm 吗?\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>这个题目中有无数槽点：\u003C\u002Fp>\n\u003Cp>画个界面只要快就好了吗？JS类库能帮你解决渲染慢的问题？类库和组件能帮你解决所有的兼容问题？不需要高并发所以就不需要架构？\u003C\u002Fp>\n\u003Cp>这里的每一条都值得展开来反驳，但鉴于题主的主要疑问不在这里，就不跑题。\u003C\u002Fp>\n\u003Cp>这个问题的核心，抽取一下就是两个：\u003C\u002Fp>\n\u003Col>\n\u003Cli>为什么前端越来越复杂了\u003C\u002Fli>\n\u003Cli>Node.js在前端开发中是干什么的\u003C\u002Fli>\n\u003C\u002Fol>\n","",{"total":14,"totalRoots":14,"comments":21,"pv":14},[]]