【Rollup打包】rollup简洁，小，高效。默认开启treeshaking，输出结果更加扁平，打包结果完全可读，
加载非ESM的第三方模块比较复杂，模块最终都被打包到一个函数中，无法实现HMR,浏览器环境中，代码拆分功能依赖AMD库，适用于开发一个框架或者类库，很少在代码中依赖第三方模块
可以通过命令行方式进行简单的打包
如
yarn rollup ./src/index.js --format iife --file dist/index.js也可以通过配置文件方式进行配置，不过运行时需要加
--config参数，因为默认不会打包不会使用配置文件配置文件如
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
}
}运行命令
yarn rollup --config
yarn rollup --config rollup.config.js // 或者prod.config.js等等指定配置文件名使用插件
插件是Rollup唯一扩展方式
import json from 'rollup-plugin-json' // 一个导入json文件插件export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
json() // 调用结果放入plugins数组中
]
}使用NPM模块
可以借助
rollup-plugin-node-resolve插件,放入plugins中import resolve from 'rollup-plugin-node-resolve'
...
plugins: [
json(),
resolve()
]
...加载CommonJS模块
默认不被支持，因为rollup就是为了打包ESM模块.需要借助
rollup-plugin-commonjsimport commonjs from 'rollup-plugin-commonjs'
...
plugins: [
json(),
resolve(),
commonjs()
]
...代码拆分
使用动态导入实现代码拆分
import('./logger').then(({ log }) => {
log('代码拆分')
})打包格式
format不能使用IIFE或者UMD这种方式，需要输入多个文件，output参数需要配置打包输出目录output: {
dir: 'dist',
format: 'amd'
}多入口打包
input属性修改为数组或者对象的形式input: {
foo: 'src/indexA.js',
bar: 'src/indexB.js'
},
