牡丹园网站建设店面设计图纸
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', // 输出文件的格式，如cjsname: '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