相比于webpack,rollup要小巧的多,它仅仅是一款ES Module打包器,并不支持例如HMR等特性,它的初衷是提供一个充分利用ESM各项特性的高效打包器;
yarn add roullup --dev
下载之后rollup会提供一个cli程序,可以通过yarn或者npx来执行,避免我们通过路径去查找cl(这里和前面我们手动写的xp-web工作流类似)
yarn rollup ./src/index.js --format iife --file ./dist/bundle.js
新建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唯一拓展途径;
这里我们使用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默认只能按照文件路径去加载本地模块,不能像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默认只能处理ESM模块,为了兼容CJS模块,Rollup提供了一个插件;
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的代码分割与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,大多数知名框架和库都在使用rollup打包;
零配置的前端应用打包器
yarn add parcel-bundler --dev
yarn parcel src/index.html
parcel推荐我们使用html作为入口文件(这点与webpack推荐我们使用js文件不同)
yarn parcel build src/index.html
// 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')
})
}