webpack、gulp、rollup、tsc/babel 使用对比

本文档主要介绍四种工具的特色， 包括优势、缺点、 输入、输出、可以处理的文件类型，针对不一样文件类型的处理方式， 以及其适用场景。

Rollup

简介

Rollup 是一个模块打包工具, 能够将咱们按照 ESM (ES2015 Module) 规范编写的源码构建输出以下格式:

• IIFE: 自执行函数, 可经过 <script> 标签加载
• AMD: 经过 RequireJS 加载
• CommonJS: Node 默认的模块规范, 可经过 Webpack 加载
• UMD: 兼容 IIFE, AMD, CJS 三种模块规范
• ESM: ES2015 Module 规范, 可用 Webpack, Rollup 加载

优势：

支持动态导入。

支持tree shaking。仅加载模块里用获得的函数以减少文件大小。

Scope Hoisting。 rollup能够将全部小文件生成到一个大文件中，全部代码都在同一个函数做用域里:， 不会像 Webpack 那样用不少函数来包装模块。

没有其余冗余代码, 执行很快。除了必要的 cjs, umd 头外，bundle 代码基本和源码差很少，也没有奇怪的 __webpack_require__, Object.defineProperty 之类的东西,

缺点：

不支持热更新功能；对于commonjs模块，须要额外的插件将其转化为es2015供rollup 处理；没法进行公共代码拆分。

输入：

options.input  单/多文件入口点

输出：

rollup支持生成 iife、cjs、amd 、esm、umd格式的文件； 单/多js文件输出

文件资源处理： 

rollup 经过插件来编译处理各种静态资源：

• rollup-plugin-typescript2
• rollup-plugin-babel
• rollup-plugin-uglify
• rollup-plugin-commonjs
• rollup-plugin-postcss
• rollup-plugin-img
• rollup-plugin-json

基本使用参考

 http://www.javashuo.com/article/p-zwdophsv-dz.html

适用场景：

由纯js开发的第三方库； 须要生成单一的umd文件的场景

案例：

纯js/ts编写的第三方库：

React、Vue

UI组件库 evergreen

使用 babel 将 js/ts 编译成  esm 和 cjs 格式的模块文件， 使用 rollup 将库打包成  umd 格式的 evergreen.min.js 和 evergreen.js ,  打包出来的代码比较干净。

gulp

简介

前端构建工具，gulp是基于Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操做上很是简单。

gulp基于流式操做，经过各类 Transform Stream 来实现文件不断处理 输出。

优势：

gulp文档简单，学习成本低，使用简单；对大量源文件能够进行流式处理，借助插件，能够对文件类型进行多种操做处理。

缺点：

不支持tree-shaking、热更新、代码分割等。 gulp 对 js 模块化方案无能为力，只是对静态资源作流式处理，处理以后并未作有效的优化整合。

输入：

输入（gulp.src） js，ts，scss，less 等源文件

输出：

对输入源文件依次执行打包（bundle）、编译（compile）、压缩、重命名等处理后输出（gulp.dest）到指定目录中去

适用场景：

静态资源密集操做型场景，主要用于css、图片等静态资源的处理操做。

文件处理：

gulp经过各类中间件处理静态资源的编译：

• gulp-load-plugins：自动加载 package.json 中的 gulp 插件
• gulp-rename： 重命名
• gulp-uglify：文件压缩
• gulp-concat：文件合并
• gulp-less：编译 less
• gulp-sass：编译 sass
• gulp-clean-css：压缩 CSS 文件
• gulp-htmlmin：压缩 HTML 文件
• gulp-babel: 使用 babel 编译 JS 文件
• gulp-jshint：jshint 检查
• gulp-imagemin：压缩jpg、png、gif等图片
• gulp-livereload：当代码变化时，它能够帮咱们自动刷新页面

案例：

antd

gulp + webpack + tsc / babel

gulp的做用主要是打包流程管理， 拷贝文件(less/ts/ts类型声明文件)，处理less， 拷贝并转译less 为css。

tsc及babel 则用于转译 静态ts文件, 逐个输出到指定目录es/lib目录下

webpack主要用于模块化处理，将打包后的模块编译到 dist下的  antd.js   antd.min.js 以及及其余css文件等。

Webpack

简介：

Webpack 是一种前端资源模块化 管理和打包 工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分割，等到实际须要的时候再异步加载。

优势：

基本以前gulp 能够进行的操做处理，如今webpack也均可以作。同时支持热更新，支持tree shaking 、Scope Hoisting、动态加载、代码拆分、文件指纹、代码压缩、静态资源处理等，支持多种打包方式。（优势有不少，在这不作过多赘述）

缺点：

不支持 打包出esm格式的代码 (打包后的代码再次被引用时tree shaking 困难)， 打包后亢余代码多，配置较为复杂。

输入：

入口文件 js/ts

输出：

js、css、 img等静态资源文件

适用场景：

应用程序开发

案例：

react-bootstrap

react-bootstrap 使用babel进行tsx文件的编译，而且按照原有目录输出到 lib esm/cjs目录下；

同时使用shell 工具 拷贝 TS类型声明文件 到对应目录；

对于umd文件，则采用webpack打包生成了  react-bootstrap.min.js 及 react-bootstrap.js 输出到dist下。

打包umd方式很是简单，但文件中保留了许多webpack使用的到的冗余代码。生成效果不如上述 的 evergreen 纯净。

tsc / babel

简介

tsc/babel 能够将 ts 代码编译 js 代码。支持编译成 esm、cjs、amd 格式的文件

优势：

编译速度快，能够保留原有的目录相对位置，分目录保存各模块的代码，便于按需引用加载；

缺点：

只对语言自己进行编译转换，不支持tree shaking 等高级功能。

输入:

ts/js 文件

输出：

ts/ts对应的js文件，且一一对应

案例分析：

tsc/babel常与其余工具配合使用

打包使用方式推荐

第三方js类库：

1.  rollup + 插件 （推荐）
2.  babel/tsc + uglifyjs
3.  webpack

UI类库开发(按需加载)

生成esm   tsc/babel  + gulp

生成cjs     tsc/babel + gulp

生成umd   rollup （js + css的合并文件）

开发应用程序

webpack + loader + plugin

上述打包方式各有其特色，根据当前需求及开发便利，酌情选择打包编译方式。