如何打造一个令人愉悦的前端开发环境（三）

cgh1999520 发布于2019-08-20 10:43 / 383人阅读

摘要：的最后一个大招就是替换一些传统的服务端语言，例如，，等，在业务层上面使用来开发服务端完全不成问题。更多的的使用细节和技巧建议关注美团博客大搜车论坛下一篇我们开启如何结合和搭建一个开发环境和项目目录

往期回顾

前面2期都讲得是浏览器端的东西比较多，包括Webpack，虽然是Node处理的，但是还是浏览器端用的多，对于现在的前端开发来说，不懂一点服务端的东西，简直没办法活，一般的招聘要求都会加上要懂一门服务端的语言，例如：PHP，Java之类的啦。如图所示：

所以我们这期就讲Node的东西。

程咬金的三板斧 一、劈脑袋 -- 工具链

Node在前端领域使用最为广泛的就是工具链了，一期提到的构建工具都是Node写的，当然还有其他很多工具，比如：京东工程化，百度开源构建工具FIS3，微信发布的工作流工具等等一系列前端工具都是用Node写的。广泛的说，我认为一期提到的编辑器也算工具链的中的一种，Atom，vs code，Brackets都和Node密不可分。我个人感觉，Node的发展，实际上大大解放了前端的生产力，对于其他的服务端语言的依赖基本可以说降到最低，可以依据自己的需要编写工具来完成技术目标。

这方面大家也可以自己来产出下，例如我自己写了个小工具供自己使用：
vuejs 格式化 Atom插件
现在下载量也不错，有2000多了，还有好几个issues没有处理，哭！！

二、鬼剔牙 -- 中间层

对于很多FE来说，要搭建一个后端环境很是麻烦，而且不熟悉，容易出错（java，ruby，php），最糟的是自己不懂，出错了完全不会调试，你的表情此时是这样的：

那么在13、14年的时候，淘宝的前端团队，开始连续发文，前后端分离的思考和实践系列文章，提到了中途岛计划，也就是把Node作为前端和服务端的中间层，也就是这个架构，

从这种图，不难看出，Node取代原来php，java干的一部分事情，也就是我们常说的MVC框架中的VC基本都给Node来干，FE干的事情更多了，能掌握的东西多了，意味着对于自己更加灵活，可以考虑更多的组件化，工程化，性能监控，数据分析的事情。

这方面的实践大家可以参考美团这边的图文：

美团酒店Node全栈开发实践

三、掏耳朵 -- 火热的全栈

Full Stack developer 是近年来热炒的一个概念，究其原因，跟Node的火热不无关系，早些年讲，一个人（大牛不算普通人）既要精通java又要精通js，html，css还是很困难，很多思维都不太一样，分开也很正常，而Node的出现，为很多比较厉害的前端提供了切入到服务端的机会，语言层面的问题不在是难点，重要的对服务端的知识点的熟悉程度。Node的最后一个大招就是替换一些传统的服务端语言，例如php，ruby，java等，在业务层上面使用Node来开发服务端完全不成问题。

例如： uber的调度系统几乎都是用 node.js 编写的

这方面的文章也有很多了，大家可以自己去搜搜看，包括各种框架，还有各种开源系统，都可以找到。当然也还有各种各样的坑和问题以待大家去踩和解决。

说说自家事

我们公司来说的话，三板斧基本都用上了，打包构建自不用谈，基本每个前端都会用到，第二板斧我们公司已经基本切换过来了，年后3月启动，目前是所有的web页面都是Node作为中间层，替换了php的渲染，中间自然有很多的困难要克服，但整体上来说开发的效率还是大大提升，不需要在配置php的环境，也不用在关心各种环境的依赖，整体上自己的一个独立的服务，使用接口的形式和服务端通信。

那么三板斧为何会用到，主要是目前国内最常见的mobile的web页面，基本在微信里面流传，然后这些页面还需要一定的数据交互，而且这种页面的特点就是短平快，不需要那么严谨，这种页面特别适合前端自己一撸到底，前后端通吃，接上 MongoDB当做数据库，基本两三天之内就能开发一个活动页面出来，不需要对其他服务有任何依赖，包括微信授权都可以自己搞定，工作量其实比对接其他语言服务大不了多少，某些方面，我个人认为还减少了很多的沟通成本。

痛点-- 造就了自己的一个开源

express的路由插件

先说说这个插件做什么的：主要是自动的加载express框架下面的路由，免得一个一个路由需要手写。

通常我们在express框架下面，写路由的时候都是一个一个的手写，然后在app.js里面去一个一个引用，一般是这样子的

那么好一点的情况，是这样子的，分散每一个相同名字的路由到文件中，然后引用文件在app.js里面。

但实际上你可能在项目中路由情况是这样子的

你有什么想法？

虽然这样子也就是一个文件多两行代码，我还是不爽，我为什么要因为同一个规则而去多写这两个代码，而且10个两行，就是20行，原则上，能用机器干的事情，就不人干，而且PHP的一些MVC框架可以自动加载路由，他们会有一个文件夹的分层，很明显，路由都放到Controller文件夹下，然后根据路由名来匹配文件名的相应action，依据这个我自己就撸了一个express的自动加载路由，然后考虑了下一些特殊情况，做了点配置，不过目前只是支持一级目录，没有考虑多级目录情况，有需要可以自己添加，或者给我提issues。

照例总结

本篇文章主要讲的是关于Node的东东，它的使用方向，更偏向结合前端的使用，并非是很深入的Node原理，也算是给很多前端解惑下，为什么要使用Node，以及如何使用Node，不要盲目的听信别人的建议，需要结合自己项目情况，技术水平，以及团队配比。

更多的Node的使用细节和技巧建议关注：

美团博客

大搜车

cnode论坛

下一篇我们开启如何结合Webpack和express 搭建一个开发环境和项目目录

私有云服务器托管 docker 打造开发环境前端开发环境前端开发环境搭建 linux系统如何配置java系统的开发环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80284.html

如何打造一个令人愉悦的前端开发环境（二）

摘要：解析不同文件使用哪些，这个比较简单，很多文章都有，就不多说了，注意的是，这里的可以换成你自己的预编译器，例如等，或者直接用都行，当然还可以用一种通用方法，后面补上。前情提要上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webp...

Lowky 2019-08-01 15:33 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（二）

摘要：解析不同文件使用哪些，这个比较简单，很多文章都有，就不多说了，注意的是，这里的可以换成你自己的预编译器，例如等，或者直接用都行，当然还可以用一种通用方法，后面补上。前情提要上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webp...

Object 2019-08-22 10:36 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（四）

摘要：在前后端分离的前端项目开发中经常用到。是的一个中间件。即是一个重要的功能。配置先来在配置文件中引入添加一个和通信的客户端添加应用入口文件在插件中引入在我们的开发环境中是这样配置的。原文链接此文是我同事写的，搭建Express结合Webpack。以下是正文，后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实...

StonePanda 2019-08-20 12:03 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（四）

摘要：在前后端分离的前端项目开发中经常用到。是的一个中间件。即是一个重要的功能。配置先来在配置文件中引入添加一个和通信的客户端添加应用入口文件在插件中引入在我们的开发环境中是这样配置的。原文链接此文是我同事写的，搭建Express结合Webpack。以下是正文，后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实...

animabear 2019-08-01 15:54 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（一）

摘要：我觉得这方面的原因是当时对和的依赖，导致大家对的兴趣不弄，错过了最佳时机，这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是的构建工具。文章来源最近几年，前端发展越来越迅速，各种萌新加入了前端这个大家庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各种前端工作问题，除了最基础的html、css、js三板斧之外，最让人头疼的应...

KavenFan 2019-08-02 16:21 评论0 收藏0