【前端工程化】四：打包工具Rollup快速上手和Parcel的使用

Rollup

相比于webpack，rollup要小巧的多，它仅仅是一款ES Module打包器，并不支持例如HMR等特性，它的初衷是提供一个充分利用ESM各项特性的高效打包器；

Rollup快速上手

yarn add roullup --dev

下载之后rollup会提供一个cli程序，可以通过yarn或者npx来执行，避免我们通过路径去查找cl（这里和前面我们手动写的xp-web工作流类似）

Usage: rollup [options]
必须指定 --format，即打包后的格式（amd, cjs, system, esm, iife, umd）；
–file 指定打包后输出的文件（webpack会自动输出）；

yarn rollup ./src/index.js --format iife --file ./dist/bundle.js

rollup默认会开启tree-shaking，未引用部分都不会输出

Rollup配置文件

新建rollup.config.js，rollup必须手动指定配置文件

yarn rollup --config rollup.config.js

// rollup.config.js
export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'iife'}
}

Rollup插件

当我们需要加载其他类型的资源文件，编译新特性等，我们可以使用插件来拓展Rollup，插件是Rollup唯一拓展途径；

这里我们使用rooluo-plugin-json插件为例 yarn add rollup-plugin-json --dev，将json文件的对象默认导出；

//----------rollup.config.js中
import json from 'rollup-plugin-json'export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'iife'},plugins: [json()]
}//---------index.js文件中
import { name } from '../package.json'

Rollup加载npm模块

rollup默认只能按照文件路径去加载本地模块，不能像webpack一样直接用名称去加载node_modules里面的对应模块；rollup默认只能处理ESM模块；

rollup-plugin-node-resolve

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'iife'},plugins: [json(),resolve()]
}

Rollup加载CommonJS模块

因为rollup默认只能处理ESM模块，为了兼容CJS模块，Rollup提供了一个插件；

这里有个知识点，可以使用ESM导入CJS模块，CJS模块会默认导出，但是反过来不行；

rollup-plugin-commonjs

import commonjs from 'rollup-plugin-commonjs'export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'iife'},plugins: [commonjs()]
}// cjs-module.js
module.exports = {foo: 'bar'
}
// index.js
import cjs from './cjs-module'console.log(cjs) //{ foo: 'bar'}

Rollup代码分割

rollup的代码分割与webpack有些相似，可以对比学习；

rollup同样支持动态导入，但是由于多文件导出，就不再支持output的file属性，而是dir属性，并且不支持iife模式

export default {input: 'src/index.js',output: {// file: 'dist/bundle.js',// format: 'iife'dir: 'dist',format: 'amd'}
}// index.jsimport('./logger').then(({ log }) => {log('code splitting~')
})

rollup也同样支持多入口打包，对于公共部分也会提取出来，使用的形式可以和webpack一样，使用对象键值对的方式，也可以使用数组的方式；因为多入口打包内部会提取公共模块，所以这里仍然不可以使用iife模式打包；

export default {// input: ['src/index.js', 'src/album.js'],input: {foo: 'src/index.js',bar: 'src/album.js'},output: {dir: 'dist',format: 'amd'}
}

Rollup和webapck对比

输出结果更加扁平
自动移除未引用代码
打包结果仍然完全可读
加载非ESM的第三方模块比较复杂
模块最终都被打包到一个函数中，无法实现HMR
浏览器环境中，amd模式代码拆分功能依赖AMD库

如果我们正在开发一个框架或者类库可以使用rollup，大多数知名框架和库都在使用rollup打包；

Parcel

零配置的前端应用打包器

yarn add parcel-bundler --dev

yarn parcel src/index.html

parcel推荐我们使用html作为入口文件（这点与webpack推荐我们使用js文件不同）

parcel同样支持动态导入的代码分割；
支持HMR，但与webpack不同的是只有一个参数，当前模块修改时就会触发；
运行parcel打包的同时会开启一个本地服务器；
parcel会自动安装依赖，无需npm install手动安装模块；
parcel以生产模式打包 yarn parcel build src/index.html
parcel使用worker进程去启动多核编译，同时有文件系统缓存，即使在重启构建后也能快速再编译，极速的打包体验

// index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Parcel Tutorials</title>
</head>
<body><script src="main.js"></script>
</body>
</html>

// import $ from 'jquery'
import foo from './foo'
import './style.css'
import logo from './zce.png'foo.bar()import('jquery').then($ => {$(document.body).append('<h1>Hello Parcel</h1>')$(document.body).append(`<img src="${logo}" />`)
})if (module.hot) {module.hot.accept(() => {console.log('hmr')})
}