Rollup【ESM打包工具】

目录

一、Rollup概述

二、Rollup 快速上手 

三、Rollup 配置文件

四、Rollup 使用插件 

五、Rollup 加载 NPM 模块 

六、Rollup 加载 CommonJS 模块

七、Rollup 代码拆分 

八、Rollup 多入口打包

九、Rollup 选用原则 

---

rollup 官网：简介 | rollup.js 中文文档 | rollup.js 中文网

一、Rollup概述

• Rollup 与 Webpack 类似，仅仅是一款 ESM 打包器
• Rollup 中并不支持类似 HMR 这种高级特性
• 提供一个充分利用ESM 各项特性的高效打包器

二、Rollup 快速上手 

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

 三、Rollup 配置文件

• 在根目录新建 rollup.config.js
•  yarn rollup --config
• yarn rollup --config rollup.config.js

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

四、Rollup 使用插件 

• yan add rollup-plugin-json --dev
• 在 index.js 导入 import { name, version } from '../package.json'

// index.js

// 导入模块成员
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'

// 使用模块成员
const msg = messages.hi

log(msg)

log(name)
l