环境
node.js已安装
安装
安装命令
npm install --global rollup
基础案例
创建src/main.js文件
// src/main.js
import foo from './foo.js';
export default function () {
console.log(foo);
}
创建src/foo.js文件
export default 'hello world!';
终端运行打包命令
rollup src/main.js -f cjs
运行后结果
命令解析
-f： (是 --format 的缩写)，用于确定打包后的文件应用类型
cjs： CommonJS 的缩写
因为没有指定输出文件，所以直接在控制台打印出来
将打包内容保存到文件中命令
rollup src/main.js -o bundle.js -f cjs
或者用这种模板
rollup src/main.js -f cjs > bundle.js
使用配置文件打包
在项目根目录中创建一个名为 rollup.config.mjs 的文件，并添加以下代码：
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
(你也可以使用 CJS 模块，例如 module.exports = {/* config */})
配置文件对应的打包命令
使用配置文件, 我们使用 --config 或者 -c ：
rollup -c
使用等效的命令行选项覆盖配置文件中的任何选项：
rollup -c -o bundle-2.js
选择指定不同于默认的 rollup.config.mjs 的配置文件
rollup --config rollup.config.dev.mjs
rollup --config rollup.config.prod.mjs
插件的使用
应用示例插件： @rollup/plugin-json
作用：允许 Rollup 从 JSON 文件中导入数据
步骤
创建package.json文件
{
"name": "rollup-tutorial",
"version": "1.0.0",
"scripts": {
"build": "rollup -c"
}
}
安装依赖
npm install --save-dev @rollup/plugin-json
使用 --save-dev 而不是 --save，因为我们的代码在运行时实际上不依赖于插件，只有在打包时才需要。
src/main.js 文件引入.json文件
import { version } from '../package.json';
export default function () {
console.log('version ' + version);
}
配置文件rollup.config.mjs引入插件
import json from '@rollup/plugin-json';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
},
plugins: [json()]
};
打包命令运行
npm run build
该命令执行对应的执行的
rollup -c
结果文件：
输出插件
使用示例插件：@rollup/plugin-terser
作用：进一步压缩打包后的文件
步骤
安装插件
npm install --save-dev @rollup/plugin-terser
修改配置文件rollup.config.mjs
// rollup.config.mjs
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';
export default {
input: 'src/main.js',
output: [
{
file: 'bundle.js',
format: 'cjs'
},
{
file: 'bundle.min.js',
format: 'iife',
name: 'version',
plugins: [terser()]
}
],
plugins: [json()]
};
运行打包命令
npm run build
打包后结果
