什么是前端工程化?

为什么需要前端工程化?

目前来说,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 缺失的样式层复用机制、减 少冗余代码,提高样式代码的可维护性。

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

模块化!简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼 装和加载。只有这样,才有多人协作的可能。

JS 的模块化

在 ES6 之前,JavaScript 一直没有模块系统,这对开发大型复杂的前端工程造成 了巨大的障碍。对此社区制定了一些模块加载方案,如 CommonJS、AMD 和 CMD 等, 某些框架也会有自己模块系统,比如 Angular1.x。

现在 ES6 已经在语言层面上规定了模块系统,完全可以取代现有的 CommonJS 和 AMD 规范,而且使用起来相当简洁,并且有静态加载的特性

规范确定了,然后就是模块的打包和加载问题:

1. 用 Webpack+Babel 将所有模块打包成一个文件同步加载,也可以打成多个 chunk 异步加载;

2. 用 SystemJS+Babel 主要是分模块异步加载;

3. 用浏览器的

你可能感兴趣的:(前端工程化)