2.1 前端工程化概述

在前端开发的初始阶段，开发者一般只用关 html, css, javascript。可是现代化的前端开发已经不只仅是业务代码自己，真正的前端开发环境涉及不少方面的需求，如：

1. 开发需求

2. 共享需求

3. 性能需求

4. 部署需求

这些东西咱们都统一的叫作前端工程化，为了简化前端工程化的配置，出现了不少优秀的工具好比：

1. 前端工做流工具：Gulp，Grunt，Broccoli

2. 前端 Javascript 模块编译工具：Babel，Browserify，Webpack

3. 前端开发系列工具： livereload，数据 mock，代码监控，代码检查

在本节中咱们对涉及到这些概念进行简单的概述介绍。

2.1.1 前端开发需求

在开始一个前端项目的时候，一般咱们会进行技术选型，而后定义代码规范，已经配合后端和业务进行项目的目录规划，我把这些相关的需求都归为前端开发需求。

代码规范

开发一般来讲是一个团队的事，在大型的前端开发团队中，一般会定义团队的代码开发规范，也能够遵循一些开源的规范：airbnb style guide。代码规范能够提升代码的可阅读性和避免一些低级错误。为了将代码规范的检查放到前端开发工程中，能够利用 jslint 在提交代码以前对代码进行自动的 code lint。

Javascript 预处理

Javascript-* 语言

前端开发的核心是 Javascript，可是由于 Javascript 语言在设计上的种种不足，为了优化语言自己的问题，出现了不少试图替代 Javascript 的语言， 这其中如：

1. Coffeescript

2. Livescript

3. Typescript

4. React Jsx

5. Dart

6. Elm

这些语言在语法上都具备相应的优点，如 Typescript 中提供静态语法的一些强类型特性，Coffeescript, Livescript 提供现代化语言的语法糖特性，专门针对 xml 优化的 JSX 。这些语言最终都会编译为 Javascript。

ES6

由于浏览器的实现大多仍是 ES5 的标准，为了使用最新的 ES6 语法，一般的作法是采用 Babel 将 ES6 编译为 ES5。

CommonJS

前端开发一直在追求模块化，这个过程当中出现了 AMD, CommonJs, Umd 这些模块定义模式，简单而言：

• AMD（Asynchronous Module Definition）: 异步模块定义，能够异步的加载或依赖其余模块，支持的库如 Require.js, Sea.js 。

• CommonJs : 能够将 Javascript 按照 Node 模块的方式定义

• UMD: 为了兼容 AMD 仍是 CommonJsx 风格，出现了 UMD

AMD 例子：

// myFubc.js
define(['jquery'], function ($) {
    function myFunc(){};
    return myFunc;
});

CommonJs 例子：

var $ = require('jquery');
function myFunc(){};
module.exports = myFunc;

UMD 例子：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-likemodule.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    function myFunc(){};
    return myFunc;
}));

其中，CommonJs 的风格是须要编译的，最终会将多个模块编译为一个 UMD 方式定义的模块。

一个前端项目可能同时用了 Es6 的语法和 CommonJs 的规范，以及 JSX 语言。 因此前端开发须要 Javascript 的编译过程，编译的过程大可能是在开发的时候，这个过程就是 Javascript 预处理。

Css 预处理

和 Javascript 相似，也出现了一些 css-* 语言来优化 css 的开发过程，这些语言如：

• less

• sass

这些 css-* 语言一样最终都会被编译为原生的 css, 这个过程叫 Css 的预处理。

除了这类需求之外，由于浏览器的兼容问题，致使不得不在 css 上写一些浏览器兼容的 hack, 为了自动解决这些 hack, 出现了一些工具如：

• Autoprefixer

• Compass

在预处理流程中能够加入这些预处理工具。

文件处理

一般一个前端项目会分有一个 src 目录和 dist 目录， src 放置源码，dist 放置编译后的代码。因此在前端工程的流程中会涉及到文件的拷贝，删除，移动等流程。

开发效率

一般的前端开发过程是，修改前端代码，调用命令编译代码，而后浏览器 F5 刷新。这个过程能够作到自动化，经过代码监控工具，指定要监控的目录和文件，若是对应文件有改变，调用编译工具编译源码，而后经过 livereload 自动刷新浏览器。

数据 mock

现代化前端项目开发大可能是先后端分离的方式，也就是后端基本是提供 API 服务，在真实开发环境中，一般的问题是，后端 API 极其不稳定或者没开发，为了避免阻碍前端的开发，一般的作法是，先后端先约定 API 接口定义，而后前端根据定义 mock 接口。

对于大公司来讲，可能有 mock 平台来实现这一功能，但对于小公司小项目来讲，可能只能本身实现，咱们能够利用一些开源的数据 mock 工具来在前端工程中实现。

域名代理

对于大型线上前端应用来讲，mock 数据远远不够，进入一个页面可能须要多方的后端依赖，只能在真实环境中经过域名代理的方式实现开发和调试。

2.1.2 共享需求

对于公司和业务，快速高效的实现业务是终极追求，这对先后端都是挑战。在前端团队中，可以造成基础组件库和业务组件库是一种必然需求。

因此在设计前端项目架构的时候，必定要考虑业务的组件化和可共享性。

• Base 基础代码共享

• 通用工具方法共享

• 基础交互组件共享

• 业务组件共享

React 自然提供了组件的结构，只要在组件的开发过程当中，注意组件的独立性，很容易造成可重用的组件。

2.1.3 性能需求

web 应用的特色是，全部源码的加载都须要经过网络，因此优化源码的体积是提高首屏加载时间的关键，涉及到的一些点：

1. Javascript, Css 代码压缩

2. Javascript, Css 代码合并

3. 图片压缩

4. Css 图片精灵或雪碧图（css sprit）

这些过程均可以在前端工程的 build 过程当中实现。

2.1.4 部署需求

一个前端工程一般是多人维护的，因此会用代码管理工具(默认 git) 来管理源码，而后将开发流程和部署流程和 git 结合起来。

1. 多人分支协做流程：用 git flow 来管理代码分支

2. 代码自动发布：git hook

2.1.5 前端工做流工具

为了解决前端工程中复杂的流程，出现了不少开源前端流程处理工具。这些工做流工具不只仅是其自己，都是一个流程生态体系，每一个工具都涉及到对应的插件库，几乎咱们能想到的前端工程问题都有对用的插件可以解决。

Grunt

Grunt 是最早流行起来的前端工程，其核心思想是基于配置的工做流模式，定义一个配置文件，声明工做流各个环节的相关配置，调用 grunt 就能完成打包编译

Broccoli

一样是工做流工具，但其核心是以 tree 的基础结构，提供极其高效稳定的工做流。

Gulp

目前 Gulp 几乎已经取缔 Grunt ，成为前端的默认流程工具，其核心思想是基于内存的流的方式，提供高效的性能，极简的 API，定义不一样的 task，而后将 task 串联起来。

2.1.6 前端 Javascript 编译工具

上面咱们已经讲到了 Javascript 的预处理，这里详细介绍一下几个预处理工具

Babel

Use next generation JavaScript, Today

babel 的核心标语就是，如今就开始使用下一代的 Javascript , 咱们能够在工程中使用 Es6, Jsx, 甚至是 Es7 的语法，最终这些语法均可以被编译为 Es5。

Browserify

Browserify 是最早出现的 CommonJs 编译工具，使得咱们能够像写 Node 模块同样写前端代码，Browserify 能够 build 使用 npm 中的全部模块（只要 模块支持在前端中运行）

Webpack

Webpack 是支持 CommonJs 和 AMD 的模块编译工具，逐渐替代 Browserify, 基于 AMD 的好处就是代码能够异步话，这是 Browserify 没法作到的

最后

在本章中不会涉及到全部工具，会根据 React 的开发方式配置一个最合适的前端工程环境。主要是

1. JSX + Es6 + CommonJs

2. Webpack + Babel 作 Javascript 预处理

3. Gulp 作工做流

来自为知笔记(Wiz)