rollup
webpack优势在于它更全面，基于一切皆模块的思想而衍生丰富的loader和plugin，几乎可以满足任何要求。
rollup它则更专注于javascript的打包，虽然它也支持许多其他类型的模块，但总体来说通用性不如webpack。
如果当前的需求仅是打包javascript，我们应该首选rollup
- 全局安装rollup:
npm i rollup -g
// src/index.js
console.log('my first rollup app.');
// rollup.config.js
module.exports = {
input: "src/index.js",
output: {
file: "dist/bundle.js", // 打包后的存储目录
format: 'cjs', // 使用哪种模块化模范
name: 'bundleName' // 如果使用的是iife或者amd，需要指定一个全局变量
}
}
- 执行打包：rollup -c rollup.config.js
- 执行结果
// dist/bundle.js
'use strict';
console.log('my first rollup app.');
tree shaking
rollup的tree shaking也是基于es6 module的静态分析的，所以只支持import和export方式导入导出。其实tree shaking这个特性最早是由rollup实现的，然后被webpack借鉴过去。
// src/index.js
import { add, noUse } from './utils'
console.log(add(2, 7)); // 这种，rollup才不会干掉
// 如果没有任何输出，这种，rollup的tree shaking会直接把这个干掉
// add(add(2,7), 7)
console.log('my first rollup app.')
// src/utils
export function add(a, b) {
return a + b;
}
export function noUse() {
console.log('我是没有用到的函数');
}
输出：
function add(a, b) {
return a + b;
}
console.log(add(2, 7)); // 这种，rollup才不会干掉
// 如果没有任何输出，这种，rollup的tree shaking会直接把这个干掉
// add(add(2,7), 7)
console.log('my first rollup app.');
format
rollup的format属性，output.format支持选择输出的模块形式:
- cjs: commonjs
- amd
- esm
- iife
- umd
- system
parcel
parcel在js打包工具中属于相对后来者，在打包速度优化上做了3件事：
- 利用worker来并行执行任务(webpack使用happypack实现压缩过程，而非编译过程中并行执行任务)
- 文件系统缓存（webpack的缓存更多是在loader中应用）
- 资源编译处理流程优化
babel-loader的工作流程：
- 将es6形式的字符串内容解析成AST，抽象语法树
- 将AST进行语法转换
- 生成 ES5代码，并作为字符串返回
如果有三个loader：
- 资源输入
- loader1(string -> AST -> string)
- loader2(string -> AST -> string)
- loader3(string -> AST -> string)
- 资源输出
parsel处理资源流程不像webpack一样可以对loader随意组合，但也正因为它不需要那么多string和ast的转换操作，所以它处理资源的步骤少多了:
它的输入输出都可以用AST，只会在最后一个处理流程将AST转换成string
如果有三个loader：
- 资源输入
- loader1(AST)
- loader2(AST ->)
- loader3(AST -> string)
- 资源输出
零配置
parcel另一个特性，是零配置，不像webpack和rollup一样需要config.js。
- 全局安装：https://parceljs.org/getting_started.html
npm install -g parcel-bundler - 写模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>parcel打包</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
document.write('hello parcel')
-
启动开发模式：parcel index.html
访问: http://localhost:1234/ -
运行打包: parcel build index.html
会对文件进行压缩
parcel可以使用html文件作为入口，parcel自动为生成的资源进行压缩、添加hash版本和source map。
初始配置上比webpack简洁很多，但同时，它也失去了定制性。
虽然parcel没有自己的配置文件，但本质上它是把配置进行了拆分，交给babel、posthtml和postcss等一些特定工具进行分别管理。
总结
rollup更专注于js的打包，它自身附加的代码更少，具备tree shaking且可以输出多种形式的模块。
parcel在资源处理流程上做了改进，以追求更快的打包速度。同时零配置的特性可以减少很多项目开发中花费在环境搭建上的成本。
网友评论