前端构建工具&&前端模块化工具&&前端架构工具&&前端类库

前端自动化构建工具

• webpack

是一个打包模块化的ｊｓ的工具，在webpack里一切文件都是模块，通过loader转换文件，通过Plugin注入钩子，最后输出由多个模块组成的文件．
详见官网，最近特别流行！

• gulp

基于流的自动化构建工具，管理任务，执行任务，监听文件，读写文件;
1.gulp.task注册一个任务
2.gulp.run执行任务
3.gulp.watch监听文件变化
4.gulp.src读取文件
5.gulp.dest写完文件
Gulp 的优点：好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。

• Rollup

是一个和webpack很像但是专注于ｅｓ６的模块打包工具，亮点针对ES6源码进行 Tree Shaking,以去除那些已经被定义但没被使用的代码并进行 Scope Hoisting，以减少输出文件的大小和提升运行性能
1.Rollup 是在Webpack 流行后出现的替代品
2.Rollup 生态链不完善，体验还不如Webpack
3.Rollup 的功能不如 Webpack 完善，但其配置和使用更简单；
4.Rollup 不支持 Code Spliting， 但好处是在打包出来的代码中没有 Webpack 那段模块的加载、执行和缓存的代码
5.Rollup 在用于打包JavaScript库时比 Webpack 更有优势，因为其打包出来的代码更小、更快

webpack VS gulp

image.png

模块化工具

• seajs&&require.js&&es6模块化

1.seajs,采用CMD规范的实现
2.require.js采用AMD规范的实现
3.es6模块化;import,export

架构工具

• ｎｐｍ

node的包管理工具

• jspm

ｊｓ包管理器，面向未来；在开发或者上线的时候不需要打包ｊｓ，而是采用异步加载的方式，ｊｓｐｍ打算把ｎｏｄｅｊｓ和浏览器端使用包分开

前端类库

• ａｎｇｕｌａｒ

ａｎｇｕｌａｒ

• react 生态

react+react-router+redux

• vue 生态

vue+vue-router+vuex

其他

1.浏览器的兼容性，toB还是toC,移动端还是ＰＣ端这些都是选用框架的考虑因素；
2.backbone.js,前端ｍｖｃ框架的先驱