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.hilog(msg)log(name)
log(version)

// rollup.config.jsimport 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.hilog(msg)log(name)
log(version)
log(_.camelCase('hello world'))

// rollup.config.jsimport 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.jsimport 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.jsimport 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.

Rollup【ESM打包工具】相关推荐

rollup函数_Vue3同款打包工具Rollup常用配置
Rollup的优势在最新的Vue3版本中,也使用了rollup作为打包工具.相比于webpack,rollup要轻量许多,用于弥补gulp的无tree-shaking是很好的选择,最大的用途是打包生 ...
rollup打包工具
Rollup webpack的打包比较繁琐,打包体积比较大. rollup主要是用来打包js库的. vue/react等都在用rollup作为打包工具. 使用安装依赖 yarn add @babel ...
前端打包工具rollup、webpack、vite的区别
前端打包工具rollup.webpack.vite的区别文章目录前端打包工具rollup.webpack.vite的区别一.结论二.rollup 三.webpack 1. 核心概念 2. 重要 ...
前端打包工具Esbuild--模块化、ESM、esbuild-loader、
模块化编程在前端领域已非常普遍,应用程序中将各种功能细分成独立的模块(单独文件)进行开发.module bundler 将所有文件串联起来变成了必须. JavaScript 社区中有很多程序的打包工具 ...
JS打包工具rollup——完全入门指南
因项目需要,最近一直在研究前端打包技术,参照以下文章及rollup官网,通过亲手操练,对rollup有了初步的了解.看到一篇不错的文章,转载记录.感谢作者的无私分享. 原文链接地址:https://s ...
前端打包工具-webpack和rollup的区别
开门见山 2017年4月初,Facebook 将一个巨大的 pull 请求合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动促使一些人发很 ...
Web Bundler CheatSheet, 选择合适的构建打包工具
题注:Web Bundler CheatSheet 属于 Awesome-CheatSheet 系列,盘点数个常用的开发打包工具清单.欢迎加入阿里南京前端团队,欢迎关注阿里南京技术专刊了解更多讯息. ...
JS模块化 + 打包工具webpack5
「模块化」是思想 Summarize From [「前端工程化」之 Webpack 原理与实践(彻底搞懂吃透 Webpack)汪磊原版] 文章目录 ==模块化的演变过程== 文件划分方式(全靠约定) ...
前端打包工具 Esbuild
JavaScript 社区中有很多程序的打包工具,如 Webpack.Rollup.Parcle 等,它们都是使用 JavaScript 开发,性能方面有很多不足. 而 Esbuild,采用 Go 语 ...

Rollup【ESM打包工具】

一、Rollup概述

二、Rollup 快速上手

三、Rollup 配置文件

四、Rollup 使用插件

五、Rollup 加载 NPM 模块

六、Rollup 加载 CommonJS 模块

七、Rollup 代码拆分

八、Rollup 多入口打包

九、Rollup 选用原则

Rollup【ESM打包工具】相关推荐

最新文章

热门文章