前端项目工程化

什么是前端工程化

前端工程化是使用软件工程的方法来解决前端的开发流程中模块化、组件化、规范化、自动化的问题，其主要目的为了提高效率和降低成本。

为什么需要前端工程化

Web业务日益复杂化和多元化，现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。代码量可能从以前的千行到如今的万行，甚至十万行。人数从一个人变成了N个一起协作开发。所以在业务上，我们要去思考这些复杂和多元的场景，而产生的问题，如：
1.如何扩展javascript、html、css本身的语言能力
2.如何进行高效的多人协作
3.如何解决功能复用和变更问题
4.如何保证项目的规范性
5.如何实现重复的劳动简单化
要实现前端工程化，就要解决以上的几个问题。

如何实现前端工程化

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

（1）TypeScript
typeScript是javascript的超集，扩展了语法（类Classes，接口interfaces，模块Modules,类型注解Type annotaions,编译时类型检查Compiletime type checking,Arrow函数(类似c#的Lambda))使得JavaScript变得更强大，对于面向对象编程更好的支持。
（2）CSS预处理器：SASS 、LESS、 Stylus。
它们基于CSS扩展了一套属于自己的DSL（Domain Specific Language领域特定语言 ），来解决我们书写CSS时难以解决的问题：
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
所以这就决定了CSS预处理器的主要目标：提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。

2.如何进行高效的多人协作

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

JS的模块化

浏览器端模块化的问题：
效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率
兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题
工具问题：浏览器不支持npm下载的第三方包
在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等，某些框架也会有自己模块系统，比如Angular1.x。现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。
规范确定了，然后就是模块的打包和加载问题：
用Webpack+Babel将所有模块打包成一个文件同步加载，也可以打成多个chunk异步加载；
用SystemJS+Babel主要是分模块异步加载；
用浏览器的