什么是前端工程化？

为什么需要前端工程化？

目前来说，Web 业务日益复杂化和多元化，前端开发已经由以 WebPage 模式为主转变为以 WebApp 模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个 jQuery 插件就能完成的了。如今的前端领域早已扩展到了服务端领域（Node.js），移动端领域 （Hybrid 模式 & JS To Native 模式），桌面应用，各种浏览器的 Extension ，而 JS 引擎，除了 Google V8 之外还有 JavaScriptCore，微软的 ChakraCore 等等。代码量可 能从以前的千行到如今的万行，甚至十万行。人数从一个人变成了 N 个一起协作开发。

于是历史上的“我们”随着这些需求的增加，对 JS 的改造有了很多不同的方案，如：早期 的 CoffeeScript 对 JS 的语法糖进行增强，AMD 的模块化（ require.js），打包工具 （Grunt.js）等。业务上，我们越来越从中游的承上启下，变成了去承接从点到点业务的 全面，我们会去思考这些复杂和多元的场景，而产生的问题，如：

• 如何扩展 javascript 、html、css 本身的语言能力
• 如何进行高效的多人协作
• 如何解决功能复用和变更问题
• 如何保证项目的规范性

如何解决以上问题？

如何扩展 javascript 、html、css 本身的语言能力？

对于 JavaScript 经历了近 10 年的成长，从 ECMAScript 3.到现在的 5.6.7.8。语 言有了很大的成长。但是介于不同的平台对于新的语法，新的格式的支持不统一。 我们需要一些工具来辅助这些语法使得他们可用。在网上有很多为了兼容性的整合 工具进行操作。包括现代化构建工具，都有相应的包进行处理。对于 JavaScript 不得不说的就是 JavaScript 的超集：TypeScript。

typeScript 是 javascript 的超集，扩展了语法 （类 Classes，接口 interfaces，模块 Modules,类型注解 Type annotaions,编译时类型检查 Compile time type checking,Arrow 函数(类似 c#的 Lambda))使得 JavaScript 变得更强 大，对于面向对象编程更好的支持。

CSS 预处理器：SASS LESS Stylus 。 它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问 题：

• 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选 择器
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的 形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减 少冗余代码，提高样式代码的可维护性。

如何进行高效的多人协作？

模块化