前端工程化思考与实践（一）

 

1.         背景

 

UC资深前端工程师张云龙曾在他的一篇博客中提出过一个观点“前端，是一种GUI软件”，复杂的Web应用前端界面工程量不亚于一般的传统GUI软件。这样的定义在现在看来确实十分准确。

随着前端开发的复杂化，前端代码的管理，发布，维护等等都成为了不可小视的问题。然而，目前国内的许多公司，在前端开发上还停留在非常原始的阶段 —— 选一个看起来合适的框架，然后开始堆砌代码。这样的结果是，项目开发上线确实没有问题，但是却给后期的维护，更新，重构，代码复用等等带来的极大的不便，同时这也是一种十分低效的开发方式。

 

我们项目自身遇到的一些前端问题：

u 代码增量更新时，缓存处理问题。

u 页面加载速度不如人意，急需优化。

u js代码依赖复杂，各个模块间耦合度过高，没有完全执行模块化开发。

u 项目前端代码没有规范，可读性较差。

u 页面http请求过多

u 代码书写效率过低。

……

 

针对目前所发现的这些问题，我便有了尝试前端工程化的打算，虽然在公司官网项目中我已经尝试使用了接下来我将要提到的工具和方法，但目前在这个领域我也只是属于基础阶段，还需要更多的学习。同时我也希望通过这个分享，抛砖引玉，能够让大家更加重视前端工程化，并且一起完善这个方向的研究。

 

 张云龙《前端工程——基础篇》 ：https://github.com/fouber/blog/issues/10

 

 

2.         工具介绍

u Nodejs：

所有工具的基础，前端工程化工具基于nodejs开发。

 

u Npm：

Nodejs的包管理工具，拥有大量的Nodejs库，包括FIS3的库，也是来自于这里

 

u FIS3：

面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

 

u requireJS：

   RequireJS是一个JavaScript文件或者模块的加载器，它是AMD"异步模块定义"的一个实现。它可以提高JavaScript文件的加载速度，避免不必要的堵塞。它针对于在浏览器环境中使用做过专门的优化，但它也可以在其他的JavaScript环境中使用，像Node.js一样可以在服务器上运行。

 

u r.js：

r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。

此处使用r,js是为了弥补FIS3对异步文件打包的问题。

 

u LESS（可选）：

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。（还有如SASS、Stylus等预处理语言，我们这里选择使用LESS）

 

 

3.         安装

3.1    Nodejs 安装：

WINDOWS版： http://nodejs.cn/前面Nodejs中文官方网站下载对应版本的msi文件直接安装即可。安装完成用在命令行中执行node –v查看到Nodejs版本号，代表安装成功。

 

 

3.2    Npm安装：

新版Nodejs中可能已经集成好了npm工具，所有我们先在命令行执行npm –v查看是否安装成功

 

安装成功后，我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹。

 

然后在命令行执行

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

并在环境变量里系统变量PATH增加一条

C:\Program Files\nodejs\node_global

 

这里我们安装Nodejs的express测试一下npm是否可以使用

命令行执行

npm install express –g

　　

 

安装成功后会显示express的安装路径，已经express所依赖的包。

*npm install –g中-g代表全局安装，不带-g参数的时候会将包安装到当前项目中

更多的参数选择，和nodejs包，请前往https://www.npmjs.com/查看

另外因为国内网络原因，我们有时候可能会链接不上处于国外的npm服务器，导致下载慢，或者失败，这个时候我们可以考虑使用淘宝团队给我们提供的npm国内镜像，

我目前还未使用过，就不过多介绍，具体使用可以查看http://npm.taobao.org/

 

3.3       FIS3安装：

在拥有Nodejs和npm之后我们可以很方便的安装FIS3。

在命令行输入

 

npm install -g fis3 

 

后将FIS3全局安装到本地，注意这里必须全局安装，今后才可以在命令行中使用fis3命令。安装完成后我们同样检查下是否成功

输入

fis3 –v

 

看到这个之后代表安装成功，如果安装过程有问题，可以前往github中的fis项目中查看解决方法或者提问

FIS3项目地址：https://github.com/fex-team/fis3

NPM 使用问题汇总：https://github.com/fex-team/fis/issues/565

 

3.4       RequireJS 和r.js：

直接前往http://www.requirejs.cn/docs/download.html 进行下载

 

 

3.5       LESS：

它并不是一个工具，而是一个语言，因此我们需要做的就是去学习它的语法，

http://lesscss.cn/ 有详细的介绍。

在后面我们会使用FIS3对它进行编译而生成我们熟悉的CSS文件。当然，如果你不想使用LESS或是熟悉其他的CSS预处理语言，你完全可以使用它们来进行CSS代码编写，或者直接用CSS来编写也是没有问题的（不提倡，效率不高）。