Rollup系列之安装和入门

Rollup

‌Rollup.js‌的主要用途是将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它特别适用于将ES模块编译成不同的模块形式，如AMD、CommonJS、UMD等，以便在不同的环境中使用‌。

Rollup的应用场景与好处：

• 插件或库的开发‌：Rollup可以将代码转成不同的模块形式，使得用户可以根据自身项目的模块语法来引入代码。
• ‌Tree-shaking‌：Rollup支持Tree-shaking(摇树优化)，这意味着它只会打包被引用的代码，未被引用的代码不会被包含在内，从而减少了最终打包文件的大小。
• ES模块支持‌：Rollup使用ES模块格式，这使得它可以无缝地组合和使用最喜欢的库中的个别函数，尤其是在未来所有场景都将原生支持ES模块的情况下‌1。

Rollup.js与Webpack和Babel的区别

• 与Webpack的区别‌：Webpack主要用于JavaScript应用程序的静态模块打包，支持CSS、HTML、图片等多种资源的处理，而Rollup主要处理JavaScript代码，将其转换为不同的模块形式。组件库或插件适合用Rollup打包，而大型项目则更适合使用Webpack‌。
• ‌与Babel的区别‌：Babel主要用于将高级JavaScript语法转换为低级版本以实现兼容性运行，而Rollup则是将JavaScript代码转换为不同的模块形式以供不同环境使用‌。

目前Vite直到Vite6.x版本还是使用Rollup打包生产环境，开发环境使用ESBuild。

安装

使用npm
npm i rollup -D
使用pnpm
pnpm add rollup

配置

命令配置

可以在package.json配置相关命令，下面是命令的相关含义。**注意：**在cmd环境下，如果没有全局安装需要添加npx，如：npx rollup -c index.js --file dist/index.js

基本选项及含义

-c, --config

使用指定的配置文件（如果没有指定值，默认为 rollup.config.js）。

示例：

rollup -c 使用 rollup.config.js 文件作为配置。

-d, --dir

输出文件的目录（如果未指定，则输出到标准输出）。

示例：

rollup -d dist 将输出到 dist 目录。

-e, --external

用逗号分隔的模块 ID 列表，指定不打包的外部依赖。

示例：

rollup -e lodash,react 将 lodash 和 react 作为外部依赖，不打包它们。

-f, --format

输出文件的类型（例如：amd、cjs、es、iife、umd、system）。

示例：

rollup -f cjs 生成 CommonJS 格式的文件。

-g, --globals

用逗号分隔的 moduleID:Global 键值对列表，定义全局变量映射。

示例：

rollup -f iife --globals jquery:jQuery,lodash:_ 将 jquery 映射到 window.jQuery，将 lodash 映射到 window._。

-h, --help

显示帮助信息。

示例：

rollup -h 显示命令行选项的帮助信息。

-i, --input

输入文件（作为入口文件的替代）。

示例：

rollup -i src/main.js 指定 src/main.js 作为入口文件。

-m, --sourcemap

生成源映射文件（-m inline 为内联源映射）。

示例：

rollup -m 生成源映射文件。

-n, --name

为 UMD 格式的导出指定名称。

示例：

rollup -f umd -n MyLibrary 将生成一个 UMD 格式并命名为 MyLibrary 的库。

-o, --file

输出的单个文件（如果未指定，输出到标准输出）。

示例：

rollup -o dist/bundle.js 将结果输出到 dist/bundle.js 文件。

-p, --plugin

使用指定的插件（可以重复使用此选项）。

示例：

rollup -p plugin-name 使用指定的插件。

-v, --version

显示版本号。

示例：

rollup -v 显示当前的 Rollup 版本。

-w, --watch

监听文件变化并在更改时重新构建。

示例：

rollup -w 启动文件监视。

–amd.autoId

根据块的名称自动生成 AMD 模块 ID。

示例：

rollup --amd.autoId 根据输出文件名自动生成 AMD ID。

–banner

在打包文件的顶部插入指定的代码（外部包装器）。

示例：

rollup --banner '/* My custom banner */' 在生成的 bundle 文件顶部插入自定义横幅。

–chunkFileNames

指定二级块文件的名称模式。

示例：

rollup --chunkFileNames '[name]-[hash].js' 为二级块生成带有哈希值的文件名。

–compact

压缩包装器代码。

示例：

rollup --compact 会生成压缩的打包文件。

–entryFileNames

指定入口块文件的名称模式。

示例：

rollup --entryFileNames '[name].js' 为入口块生成文件名。

–environment

向配置文件传递环境设置（如示例中的 process.env）。

示例：

rollup -c --environment INCLUDE_DEPS,BUILD:production 将环境变量 INCLUDE_DEPS 和 BUILD 传递到配置文件中。

–failAfterWarnings

如果构建产生警告，则以错误退出。

示例：

rollup --failAfterWarnings 使构建遇到警告时失败。

–no-dynamicImportInCjs

不写入外部的动态 CommonJS 导入。

示例：

rollup --no-dynamicImportInCjs 禁止动态导入。

–no-strict

不在生成的模块中添加 "use strict";。

示例：

rollup --no-strict 生成的文件不会包含 "use strict"。

–watch.onBundleEnd

在打包结束时执行指定的 shell 命令。

示例：

rollup --watch.onBundleEnd 'echo Build finished' 在构建完成时输出 “Build finished”。

–treeshake.manualPureFunctions

手动声明纯函数以进行树摇优化。

示例：

rollup --treeshake.manualPureFunctions 'myPureFunction' 将 myPureFunction 函数标记为纯函数。

示例

• 使用配置文件中的设置
• rollup -c
• 在配置文件中，process.env.INCLUDE_DEPS 为 'true'，process.env.BUILD 为 'production'
• rollup -c --environment INCLUDE_DEPS,BUILD:production
• 从 src/main.js 创建 CommonJS 格式的 bundle.js
• rollup --format=cjs --file=bundle.js -- src/main.js
• 创建自执行的 IIFE 格式，使用 window.jQuery 和 window._ 作为外部全局变量

rollup -f iife --globals jquery:jQuery,lodash:_ -i src/app.js -o build/app.js -m build/app.js.map

文件配置

在项目根目录创建rollup.config.js文件

单产物配置

import { defineConfig } from 'rollup'

export default defineConfig({
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 打包输出的文件
    format: 'esm', // 输出文件的格式，如cjs
    name: 'bundle' // 输出文件的名称
  }
})

多产物配置

import { defineConfig } from 'rollup'

const buildOptions = defineConfig({
  input: 'src/index.js',
  output: [
    {
      file: 'dist/rollup_cjs.js',
      format: 'cjs',
      name: 'rollup_cjs'
    },
    {
      file: 'dist/rollup_esm.js',
      format: 'esm',
      name: 'rollup_esm'
    },
    {
      file: 'dist/rollup_umd.js',
      format: 'umd',
      name: 'rollup_umd'
    },
    {
      file: 'dist/rollup_iife.js',
      format: 'iife',
      name: 'rollup_iife',
    }
  ]
})
export default buildOptions