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

基本使用参考

 https://www.cnblogs.com/tugenhua0707/p/8179686.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

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