rollup快速上手

快速上手

1 安装rollup

yarn add rollup --dev 开发中用到

2 打包文件命令

yarn rollup ./src/index.js --format iife --file dist/bund.js
yarn rollup 打包入口 --format 打包模式 --file 输出文件

3 rollup打包初体验

打包出来的文件非常简洁 默认做了tree-shaking 没用用到的代码不讲他们进行打包

配置文件 rollup.config.js 1 运行命令

rollup --config
rollup --config rollup.config.js

2 用 module.exports = {} (commonjs) 需要package.json中配置type为module，才可以使用 export default (es6)

插件 rolllup唯一的扩展方式 1 安装依赖

yarn add rollup-plugin-json --dev

2 rollup.config.js中引入以及使用

import json from 'rollup-plugin-json'

plugins:[
    json()
]

rollup加载npm模块

1 由于rollup默认是按路劲去寻找的

想要通过文件名去引入需要用到 rollup-plugin-node-resolve 插件

2 使用 rollup-plugin-node-resolve 插件

import resolve from 'rollup-plugin-node-resolve'

plugins:[
    resolve()
]

3 rollup默认只处理es模块打包，是不能导入commjs模块的

加载CommonJS模块

1 使用rollup-plugin-commonjs解决导入CommonJS模块代码

rollup中实现代码拆分

1 使用动态导入

import('./logger').then(({log})=>{
    log('code splitting~')
})

直接运行打包会爆不支持 supported for code-splitting build 可以把format改成amd 再次打包还是会有问题

2 打包后有多文件 将file的单文件改成dir的dist多文件

rollup 多入口打包

1 rollup.config.js代码

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

2 多入口 所以input需要对象或数组

output需要用多出口且为amd的模式

3 CommonJS代码不能直接使用

html中 <script src="https://unpkg.com/requirejsa2.3.6/require,js" data-main="foo.js"></script> serve foo.js启动服务

rollup的优缺点

1 优点

输出结果扁平
自动移除未引用代码 tree-shaking
打包结果依然可读

2 缺点

加载非ESM第三方模块复杂
模块最终都被打包到一个函数中，无法实现HMR
浏览器环境中，代码拆分功能依赖AMD库

webpack大而全 rollup小而美

应用程序开发webpack 库/框架使用rollup

Parcel工具 0配置