前端构建工具整理

前文

端技术范围不断发展，前端开发不只限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，所以许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeScript）随之出现，而构建工具则承担起了中间的桥梁做用。

正文

构建工具最直接的做用是：将源码转换成可执行的js,css和html，具体包括:

• 代码转换:ts->js,scss->css
• 文件优化:压缩js,css,html，压缩合并图片等
• 代码分割：提取公共代码。
• 模块合并：将模块化里的多个模块和文件合并到一个文件
• 自动刷新：监听本地代码，自动从新构建，刷新浏览器。（热重载）
• 代码校验：代码被提交到仓库前须要校验规范
• 自动发布：更新代码后，自动构建出线上发布代码，传输给发布系统

构建实际上是工程化和自动化思想的再前端的体现：将一系列流程用代码自动去实现，解放生产力。

常见前端构建工具的分类和对比

1. Npm Script

npm是nodejs附带的包管理器，npm script是npm内置的一个功能，容许在package.json文件里面使用script字段定义任务：

{
    "scripts":{
        "dev":"node dev.js",
        "pub":"node build.js"
    }
}

在这里，一个属性对应一段shell脚本，原理是经过调用shell去运行脚本命令。

优势

• 内置，无需安装其余依赖

缺点

• 功能简单，不方便管理多个任务依赖

2. Grunt

• Grunt与npm script相似，也是经过shell运行脚本命令。
• Grunt与大量封装好的插件，能够用于常见任务，也能管理任务之间的依赖。
• grunt的具体执行代码和依赖关系写在配置文件的里,例如：

module.exports = function(grunt){
    //插件的配置信息
    grunt.initConfig({
        uglify:{
            app_task:{
                files:{
                    'build/app.min.js':['lib/index.js','lib/test.js']
                }
            }
        }
    })
    ...
}

优势

• 灵活，只执行咱们定义的任务
• 有大量现成的插件

缺点

• 集成度不高，须要些大量配置
• 至关于进阶版npm script

3. Gulp

基于流的自动化构建工具。除了能够管理和执行任务，还支持监听读写文件。简单例子：

var gulp = require('gulp');     //引用基础模块
var uglify = require('gulp-uglify');    //js压缩模块

gulp.task('script',function(){  //启动任务script
  gulp.src('js/*.js')           //找到文件
  .pipe(uglify())               //压缩文件
  .pipe(gulp.dest('dist/js'))   //另存压缩文件
});
//监听
gulp.task('auto',function () {
  gulp.watch('js/*.js',['script']);     //监听script任务
  gulp.watch('css/*.css',['css']);      //监听css任务
  gulp.watch('images/*.*',['images']);  //监听images任务
})；

优势

• 灵活，可单独使用也可搭配其余工具
• 集成度不高

缺点

• 增强版Grunt，增长文件监听，文件读写，流式处理任务
• 至关于进阶版npm script

4. fis3

fis3相对于前面的工具，集成了Web开发中经常使用的构建功能：

• 资源定位：分离开发路径与部署路径之间的关系，工程师只须要使用相对路径来定位本身的开发资源，代码容易移植
• 文件指纹：输出文件时，为文件url+md5戳，优化缓存
• 文件编译：经过parser配置文件解析器作文件转换
• 压缩资源：在文件中经过match配置压缩器，实现前端工程优化
• 图片合并：CssSprite(雪碧图)配置，合并多个css导入的图片到一个图片，减小http请求

优势

• 灵活，只执行咱们定义的任务
• 有大量现成的插件

缺点

• 集成了Web开发中经常使用的构建功能，配置简单，开箱即用
• 官方再也不维护和更新，不支持最新版本的node.js
• 是一个专一于web开发的完整解决方案

5. Webpack

webpack是一个打包模块化js的工具，在webpack里，一切文件都是模块，经过Loader转换文件，经过plugin注入钩子，最后输出由多个模块组成的文件。webpack专一于构建模块化项目。

优势

• 专一于模块化，开箱即用一步到位
• 经过plugin拓展，完整好用又不失灵活
• 使用场景不局限于web开发
• 社区庞大活跃
• 良好的开发体验

缺点

• 只能用于模块化开发

6.Rollup

Rollup是一个相似于Webpack模块打包工具，但专一于ES6的模块化。

优势：

• 能对es6的源码进行Tree Shaking(简单介绍剔除无效代码，稍微详细点就是能够去除已经被定义却没被使用的代码并进行Scope Hoisting(做用域提高)，以减少输出文件的大小和提高运行性能。)

缺点：

• 打包时不支持code Spliting（对打包生成的bundle.js文件进行分割成chunk块），因此没有模块加载、执行和缓存的代码。好处是打包js库时，文件更小，可是功能不够完善
• 插件库比较少，社区不够活跃

7.parcel

parcel是一款刚诞生不久的新型打包器，而且短短几周内就得到大量赞同。

优势：

• 快速打包：parcel使用工做进程启用多核编译，而且有文件系统缓存，从新启动后也能够快速构建
• 打包全部资源：支持JS，CSS，HTML，文件资源等等 - 不须要安装任何插件。
• 自动转换：在须要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换
• 零配置代码拆分：使用动态 import() 语法拆分您的输出包，因此只加载初始加载时所需的内容。
• 模块热替换：在开发过程当中进行更改时，Parcel 会自动更新浏览器中的模块，不须要进行任何配置。
• 友好的错误记录

缺点：

• 不支持 SourceMap ：在开发模式下，Parcel 也不会输出 SourceMap，目前只能去调试可读性极低的代码；
• 不支持剔除无效代码 ( TreeShaking )：不少时候咱们只用到了库中的一个函数，结果 Parcel 把整个库都打包了进来；
• 零配置的实现实质是默认值，Parcel 只要在目录中发现这些配置文件就会认为该项目中的代码须要被处理，致使某些已经被处理的库可能会被屡次处理
• 某些配置被关闭，在特定场景不适用
• 只专一于构建用于运行在浏览器中的网页，不像webpack同样能够打包发布npm的库，构建nodejs同构应用等

发展历史

• npm script 和grunt， web开发要作的事情变多，流程复杂，引入自动化思想
• Gulp时代，出现一些新语言提升开发效率，流式处理思想的出现，简化了文件转换的流程
• webpack时代，单页应用流行，网页功能更加复杂和庞大，web开发向模块化改进，

做用

1. 实现模块化和版本管理

当项目比较庞大时，须要引入不一样的库，带来了如下问题：

不一样库命名空间冲突（例如jq和zepto都使用了window.$）
库之间有依赖，须要控制加载顺序
须要管理库的版本
这种状况下，模块化的思想出现了：将复杂系统分割成多个模块以方便开发。 主要的模块划规范：

commonJS

一种js模块化规范，commonJS的核心是经过requrire方法，同步加载所依赖的其余模块，经过module.exports导出须要的接口，具体使用方式在此不深刻

优势

• 代码在nodeJS的环境下能运行
• Npm发布的第三方模块不少都采用了commonJS规范：

缺点

• 没法直接运行在浏览器环境，必须借助工具转换

AMD

另外一种js模块化规范，与 commonJS的关键区别是异步加载所依赖的模块。AMD主要针对浏览器环境的模块化，表明实现是requirejs

优势

• 可直接运行于浏览器
• 能够异步加载
• 能够并行加载多个依赖
• 代码可运行在浏览器和nodejs环境

缺点

• 须要先引入实现了AMD的库才能使用

ES6模块化

ES6在语言层面实现模块化，经过使用import和export导入和导出模块。ES6的模块化将要逐渐取代Commonjs和AND规范，是模块化的终极解决方案。

优势

• 是模块化的终极解决方案

缺点

• 目前没法直接运行在大部分的js运行环境，须要借助构建工具等转换成es5

2. 实现工程化和自动化

前端工程化的意义,是为了提升编码->测试->维护 的运行效率，主要从开和部署两方面来入手：开发方面须要作好代码规范和开发模块化；部署阶段的主要流程包括：

1. 代码检查
2. 代码合并和压缩
3. 代码编译
4. 单元测试

工程化就是借助构建工具实现流程自动化，而前端自动化能够理解为在工程化上作更进一步的自动化。

3. 性能优化

从前文对构建工具的介绍能够看出，这里的性能优化主要如下方面：

1. 代码文件压缩，压缩Html、Css、Javascript等文件，减少体积
2. 图片压缩和合并，例如广为人知的Sprite（雪碧图）技术

4. 提供热重载

热重载也就是自动刷新，主要是监听本地源代码变化，自动从新构建和刷新浏览器，随着新的技术框架的出现，例如Vue,React等，这门技术也基本成为了开发标配。

小结

若是内容有错误的地方欢迎指出（以为看着不理解不舒服想吐槽也彻底没问题）；若是对你有帮助，欢迎点赞和收藏，转载请征得赞成后著明出处，若是有问题也欢迎私信交流，主页有邮箱地址

参考资料，吴浩麟《深刻浅出 Webpack》