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

 

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来编写也是没有问题的（不提倡，效率不高）。