前端构建工具

前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,当然人为的错误也随着流程的增加而增加了更多的出错率。所以每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程提高效率减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs360有燕尾服gruntwebpack。

百度FIS团队的fis3:
其主要功能基本都是围绕着前端开发所需要的三种编译能力:资源定位、内容嵌入、依赖声明。
fis3实现了一套“静态资源管理系统”,在开发页面的时候只需要用相对路径开发
fis3也提供了很多插件来对图片进行合并、对HTML、js、css文件进行合并,fis3会对路径中带有 ?__sprite 的图片进行合并,减少了请求数量。但单纯的资源合并是没有办法按需加载资源的,然而静态资源按需加载也是减少资源冗余的很重要的方式。
http://www.open-open.com/lib/view/open1452002802667.html

grunt:
Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。
在前端项目中,我们为了可分工明确将js,css独自出一个个的文件, 但这样一来用来页面上,增加了文件个数,同时也产生过多的Http请求,可从性能的角度来考虑,不利于页面优化。所以外卖需要利用grunt合并这些js和css文件。
http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html


webpack:
web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件,webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具),其可以兼容多种js书写规范,且可以处理模块间的依赖关系,具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布。适用于react.js的打包工具。
https://segmentfault.com/a/1190000003970448

webpack具有requireJs和browserify的功能,但仍有很多自己的新特性:
1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps,易于调试
7. 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

你可能感兴趣的:(前端构建工具)