本章主要介绍了解什么是前端工程化，以及介绍Node.js作为前端开发工具&环境的使用；在目前前端开发背景下，如果你对这两者都没有认识，那你一定不是一名合格的前端开发人员，甚至可以说不是前端开发工程师，所以，本章的内容其实是比较重要的。

前端工程化

什么是前端工程化？去掉 前端，任何方向的编程开发工程化都是软件工程化，只有软件开发工程化了，我们才有架构可言。前端开发属于软件开发，前端也是有前端架构、前端工程化的。

前端工程化内容主要有：前端规范化、模块化、组件化、自动化等。

本章主要做简单介绍，如果想关注更多，可以前往 前端团队工程化记录 , 是个人在带大前端团队过程中的一些实践纪录总结。

规范化

规范化包含开发流程，文档规范、开发方式、代码管理方式、编码规范等内容，如果一个大的项目工程没有规范约束的话，这个项目的代码管理和开发流程方式都会比较乱，设计上也不会很好，开发人员没规范，随便玩，代码质量也可能受到影响，最终造成的就是项目维护成本较高，开发效率低等，动不动可能就重构。

编码规范，在前端的话主要是js编写规范，比如目前流行用ES6、TypeScript编写前端的话，对应有 eslint 、tslint 工具，原生JavaScript编码开发也有jsLint，jsHint。这些工具可以限制编码规范，规则都是可以自定义配置的，每个团队都有不同的规范要求，根据团队情况灵活调整规则限制即可。

同样CSS也可以通过StyleLint等工具做好规范检查。

其他规范，如文档规范、开发流程、项目目录规范等就不一一举例，因为这些没有一个标准，只能是参考别人的，选择适合自己的团队，进而逐渐演变完善。

模块化

(一)、AMD 与 CMD的模块化规范

在Node.js未出现，CommonJS 规范未普及之前，有 RequireJS 和 SeaJS 两种分别为 AMD 与 CMD 模块规范的东西可以让前端进行模块化开发，和古老的前端开发方式改变较大的就是，前

端新增的js文件不再需要一个个通过 <script> 标签在页面引入，而是可以通过 require('../path/filename.js')的方式按需加载或者提前加载js，会根据文件路径去匹配动态加载js。

举例：

目前很多兼容老版本IE的网站，未使用较新的前端UI库、框架的网站，如果不使用ES6\TypeScript去开发前端的话，基本还是一直用着类似以上这种模块化规范去管理前端代码。

(二)、Nodejs后普及的CommonJS规范

Node.js作为前端开发环境或工具普及以后，以及Nodejs本身也都是用 CommonJS 规范去模块化管理前端的。下边是node.js里边模块化的举例：

模块module a：

模块module b：去引入a.js，调用a里边的方法

（三）、ES6后普及的ES6 Modules规范

ES6后，JavaScript支持 import 与 export 的方式对js模块导入和js模块导出。

了解更多，可以去学习阮一峰老师写的ECMAScript 6 入门，文章中提到的 TypeScript 模块化管理方式和 ES6 类似的。ts学习资源：TypeScript Handbook（中文版），初学者的学习顺序：原生JavaScript——>ES6——>TypeScript，其中TypeScript看自己是否需要自选，但ES6应该是作为前端必学的了，不然你赶不上前端工程化更好的浪潮。

组件化

组件化有大有小，也有根据业务和非业务组件分类，如果和业务无关，可能就是UI组件化（就是UI组件库）；前端的组件库很多，开源的也很多，比如easyui、layui、BootStrap、ant-design、primeng、iView 等不计其数，这些UI都组件化，为了是更快地去开发页面，因为前端页面开发本身就存在很多重复的工作，这些重复的UI工作就可以提炼出来组件化，组件化多了，结合规范化，慢慢的就有了组件库，就成了UI库，组件库其实还存在自动化组件测试的部分。

WebGIS技术上的一些地图框架，地图JS库也是组件化的成果，比如 OpenLayers、Leaflet等开源地图JS库。

组件化是前端工程化必不可少的部分，也是前端高效开发不可少的部分。

自动化

自动化的概念很广，能做自动化的方向也很多，目前已经达到成熟程度的自动化是组件自动化测试，前端工程自动化打包，自动化构建，自动化部署，H5页面编辑器。以及未来可能会成熟一些的AI自动化页面生成。

H5编辑器拖拽生成页面的工具大家可能平时都有接触到，比如易企秀、或者一些招聘H5，结婚请帖H5页面等，都已比较成熟。

自动化构建和持续集成，主要是开发交付测试和测试后上线的流程，一般由运维和开发人员共同协作完成。具体流程为：开发人员git提交代码到测试分支，如果使用的是 Gitlab 的话，Jenkins 和 gitlab 可以实现 DevOps 和 CI/CD 的集成，Jenkins 可以自动拉取测试分支最新代码，自动构建打包，自动部署测试环境，成功和失败都可以设置邮件通知等，测试人员就直接在测试环境进行回归测试，测试通过后，开发人员将测试分支代码合并到预生产分支，测试再次回归测试，直到通过，上线生产环境也是这样，都是自动化的过程，并且代码发布可以做到灰度发布，用户无感知的程度。不再是传统的人工打包代码，手工部署等低效的操作。

自动化是前端工程化不可缺少的部分，自动化的最终目的就是，去掉那些重复简单的苦力活，让程序来自动把工作完成。

前端工程化总结

前端工程化本质上还有很多内容，建议大家网上找更多的资源去学习了解，本专栏的核心内容不是这个，这里做大致的介绍了解，让大家入门，有概念上的认识后，接下来可能会更加轻松一些。需要强调的一点是，工程化是需要实践出来的，而不是了解阅读一下，单纯知道就行了。

Node.js

什么是Node.js？

上边也提到了Node.js，这里简单介绍一下Node.js的概念。Node.js是2009年 Ryan Dahl 开发的一个JavaScript运行环境，实际上是对Chrome V8引擎进行了封装，Node.js的出现，使得JavaScript可以运行在服务端平台，可以使用JavaScript来开发后端。_这里不详细介绍，本专栏主要使用Node.js作为前端开发环境搭建工具，不涉及Node.js后端开发内容。

什么是NPM

NPM是随同 Node.js 一起安装的 包管理工具 ，能解决 Node.js 代码部署上的问题，常见的使用场景有以下几种：

·允许用户从NPM服务器下载别人编写的第三方包到本地使用。

·允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

·允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

http-server NPM模块

http-server是个开源的npm模块，官方github仓库：https://github.com/indexzero/http-server

（1）、环境安装

到node.js中文官网下载对应系统版本的安装包，安装完成后（安装过程不停下一步即可），打开电脑的CMD命令窗口（windows下，WIN键+R后输入CMD，然后回车），输入node -v 来查看node.js安装的版本，输入 npm -v 查看npm的版本：

只要下载最新版本就行了。

（2）、安装 http-server 为全局模块

有了node.js环境后，我们可以使用 npm install [模块名称] 来安装想安装的模块。

·npm install http-server -g

cmd命令窗口执行上边命令，其中 -g 表示全局安装的意思。

安装完成后，输入 http-server -v 来检测是否安装成功。

安装下载较慢同学可以切换淘宝镜像后重新执行安装命令：

（3）、快速部署访问前端静态页面

很简单，我们只需要通过CMD来进入到想部署访问的页面文件夹下，输入命令 http-server 即可部署成功，默认端口为8080。也可以使用 http-server -p 端口 来指定不同端口，部署多个demo，成功后，访问提示的地址即可

json-server NPM模块

Get a full fake REST API with zero coding in less than 30 seconds （0编码30秒实现一个完整的REST API）

前端初学者或者是没有后端经验的前端开发工程师，推荐熟悉了解一下json-server 模块的使用，这个模块可以帮助你去创建后端REST API接口，简单的说就是增删改查的接口，可以快速创建出来，模拟实现了后端，使得前端在写demo的时候，需要一些接口请求，不需要再去写后端，也不需要把数据写死，让前端开发人员花更多的时间专注于解决前端开发问题。

（一）安装

有node.js环境后，打开CMD，执行安装模块到全局

npm install -g json-server

（二）使用

新建个demo文件夹，里边新建一个文件db.json （文件名可以随意取），复制下边json内容到文件中保存

然后，在文件夹demo根目录下，CMD执行 json-server --watch db.json 即可

（持续更新中......）