Rollup

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序，将点滴代码编织成错综复杂的程序。

• 官网：https://rollupjs.org/
• GitHub：https://github.com/rollup/rollup
• 配置选项：https://cn.rollupjs.org/configuration-options/

安装配置

# 全局安装
> npm install -g rollup
> yarn global add rollup

# 本地安装
> npm install rollup --save-dev
> yarn -D add rollup

package.json

{
	// 告诉Node.js该使用ES6模块语法处理.js扩展名的文件
	"type": "module"
}

rollup.config.js

import json from '@rollup/plugin-json';
import { globSync } from 'glob';
import path from 'node:path';
import { fileURLToPath } from 'node:url';


export default {
	// 输入文件
	input: '/home/meta/public/tools-ui/messagebox/messagebox.js',
	input: {},

	// 输出文件
	output: {
		file: '/home/meta/static/output/bundle.js',
		format: 'cjs',
		format: "esm"
	},
	output: [
		{
			format: 'iife', // 立即调用函数表达式
			name: 'MyBundle' // 提供给外部访问的全局变量名称
		}
	],
	plugins: [
		json()
	]
}

构建打包

# 默认执行当前同级目录中配置文件 rollup.config.js
> rollup -c

# 浏览器
> rollup main.js --format iife --name "myBundle" --file bundle.js

# Node.js
> rollup main.js --format cjs --file bundle.js

# 兼容浏览器与Node.js
> rollup main.js --format umd --name "myBundle" --file bundle.js

最小化压缩脚本

• NPM: https://www.npmjs.com/package/rollup-plugin-terser

• 原始脚本

• 安装配置

# 安装 @rollup/plugin-terser
> yarn add --dev rollup @rollup/plugin-terser

import terser from '@rollup/plugin-terser';


export default {
  plugins: [
		// 使用 Terser 插件进行压缩
		terser({
			compress: {
				drop_console: true, // 移除 console 语句
				drop_debugger: true // 移除 debugger 语句
			},
			format: {
				comments: false // 移除所有注释
			}
		})
  ]
}