Rollup【ESM打包工具】

Daisy__yangyang

已于 2022-03-31 10:19:52 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： rollup 文章标签：前端

于 2020-12-14 15:32:00 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_37883657/article/details/111043117

rollup 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Rollup，一款专注于ESM打包的工具，与Webpack类似但更注重效率。通过快速上手指南、配置文件设置、插件使用、加载NPM和CommonJS模块、代码拆分、多入口打包等内容，揭示了Rollup的优势和选用原则。尽管不支持某些高级特性如HMR，但其扁平化的输出和自动移除未引用代码的功能使其在库和框架开发中颇具吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

一、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)
log(version)

// rollup.config.js

import json from 'rollup-plugin-json'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()
  ]
}

五、Rollup 加载 NPM 模块

yarn add rollup-plugin-node-resolve --dev

// index.js

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

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

log(msg)

log(name)
log(version)
log(_.camelCase('hello world'))

// rollup.config.js

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 模块

yarn add rollup-plugin-commonjs --dev
yarn rollup --config

// rollup.config.js

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}

七、Rollup 代码拆分

yarn rollup --config --format amd

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

export default {
    input:'./src/index.js',
    output: {
        // file: 'dist/bundle.js',
        // format:'iife'
        dir:'dist',
        format:'amd'
    },
    plugins: {
        json(),
        resolve(),
        commonjs()
    }
}

八、Rollup 多入口打包

// roll.config.js

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

export default {
    //input:'./src/index.js',
    input:{
        foo:'src/index.js',
        bar:'src/album.js'
    },
    output: {
        // file: 'dist/bundle.js',
        // format:'iife'
        dir:'dist',
        format:'amd'
    },
    plugins: [
        json(),
        resolve(),
        commonjs()
    ]
}

在 dist 目录新建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>Document</title>
</head>
<body>
  <!-- AMD 标准格式的输出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
  <!-- 需要 Require.js 这样的库 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
</body>
</html>

serve dist

九、Rollup 选用原则

优点

输出结果更加扁平
自动移除未引用代码
打包结果依然完全刻度

缺点

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

总之， Webpack 大而全，Rollup 小而美，如果开发应用程序，用 Webpack，如果开发库/框架开发使用 Rollup.

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。