【前端工程化】四：打包工具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.js
import('./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 Tutorialstitle>
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('Hello Parcel
')
$(document.body).append(`
${logo}" />`)
})
if (module.hot) {
module.hot.accept(() => {
console.log('hmr')
})
}