前端工程化-白红宇

前端工程化

阅读量：5972 次

发布时间：2019-06-19

本文共 3874 字，大约阅读时间需要 12 分钟。

在前端开发的初始阶段，开发者通常只用关 html, css, javascript。但是现代化的前端开发已经不仅仅是业务代码本身，真正的前端开发环境涉及很多方面的需求，如：

开发需求

共享需求

性能需求

部署需求

这些东西我们都统一的叫做前端工程化，为了简化前端工程化的配置，出现了很多优秀的工具比如：

前端工作流工具：Gulp，Grunt，Broccoli

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

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

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

2.1.1 前端开发需求

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

代码规范

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

Javascript 预处理

Javascript-* 语言

前端开发的核心是 Javascript，但是因为 Javascript 语言在设计上的种种不足，为了优化语言本身的问题，出现了很多试图替代 Javascript 的语言，这其中如：

Coffeescript

Livescript

Typescript

React Jsx

Dart

这些语言在语法上都具有相应的优势，如 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.jsdefine(['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-like module.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 预处理。