Cirry's Blog

Rollup配置和常用插件

2025-02-18
技术 jsrollup
7分钟
1322字

配置

多入口打包

此场景适用于文件打包为多个类型供第三方引用,或者多入口多文件打包。

rollup.config.js
1
export default [
2
{
3
input: 'src/main.js',
4
output: {
5
file: 'dist/index.umd.js',
6
format: 'umd',
7
name: 'index'
8
},
9
},
10
{
11
input: 'src/main.js',
12
output: {
13
file: 'dist/index.es.js',
14
format: 'es',
15
},
2 collapsed lines
16
}
17
]

生成后的dist文件目录结构为如下:

1
dist
2
├── index.es.js
3
├── index.umd.js

启动本地服务功能

Terminal window
1
npm install rollup-plugin-serve --save-dev
rollup.config.dev.js
1
import serve from 'rollup-plugin-serve'
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',
7
format: 'iife',
8
name: 'bundleName',
9
},
10
plugins: [
11
serve({
12
open: true,
13
port: 3000,
14
contentBase: './dist'
15
}),
2 collapsed lines
16
]
17
};
package.json
1
{
2
"scripts": {
3
"test": "echo \"Error: no test specified\" && exit 1",
4
"build": "rollup --config rollup.config.js",
5
"dev": "rollup --config rollup.config.js"
6
}
7
}

常用插件

babel打包

  • @babel/core babel核心包
  • @babel/preset-env 预设
  • @babel/plugin-babel rollup插件
1
npm install @babel/core @babel/preset-env @babel/pulgin-babel --save-dev
rollup.config.js
1
import { babel } from '@rollup/plugin-babel';
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',//输出文件的路径和名称
7
format: 'es',
8
},
9
plugins: [babel()],
10
}
dist/bundle.js
1
'use strict';
2
3
var sum = function sum(a, b) {
4
return a + b;
5
};
6
var result = sum(1, 2);
7
console.log(result);

打包第三方库

在rollup中,从node_modules中引入的包是不会打包的,也就是说,我们在main.js中引入react或者lodash使用,打包之后的文件无法直接使用。

main.js
1
import _ from 'lodash'
2
3
export function sumA(a, b) {
4
return _.add(a, b)
5
}

打包生成结果如下:

bundle.js
1
import _ from 'lodash';
2
3
function sumA(a, b) {
4
return _.add(a, b)
5
}
6
7
export {sumA};

如果想要打包第三方库需要安装插件@rollup/plugin-node-resolve@rollup/plugin-commonjs

rollup.config.js
1
import resolve from '@rollup/plugin-node-resolve';
2
import commonjs from '@rollup/plugin-commonjs';
3
4
export default {
5
input: 'src/main.js',
6
output: {
7
file: 'dist/bundle.js',//输出文件的路径和名称
8
format: 'es',
9
},
10
plugins: [resolve(), commonjs()],
11
}

这样打包出来的结果就是符合我们可以预期使用的文件了。

bundle.js
1
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
2
3
function getDefaultExportFromCjs(x) {
4
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5
}
6
7
// ... 省略10000多行

如果有的第三方库,我们需要打包,有的第三方库,又不需要打包,可以添加参数external来配置。

rollup.config.js
1
import resolve from '@rollup/plugin-node-resolve';
2
import commonjs from '@rollup/plugin-commonjs';
3
4
export default {
5
input: 'src/main.js',
6
output: {
7
file: 'dist/bundle.js',//输出文件的路径和名称
8
format: 'es',
9
},
10
plugins: [resolve(), commonjs()],
11
external: ['lodash']
12
}

这样打包之后的文件,还是和之前一样:

bundle.js
1
import _ from 'lodash';
2
3
function sumA(a, b) {
4
return _.add(a, b)
5
}
6
7
export {sumA};

添加打包css功能

1
npm install postcss rollup-plugin-postcss --save-dev
src/main.js
1
import "./style.css"
2
let sum = (a, b) => a + b;
3
let result = sum(1, 2);
4
console.log(result);
src/style.css
1
body{
2
background: red;
3
}
rollup.config.js
1
import postcss from 'rollup-plugin-postcss'
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',
7
format: 'iife',
8
name: 'bundleName',
9
},
10
plugins: [
11
postcss()
12
]
13
};

terser代码压缩

Terminal window
1
npm install @rollup/plugin-terser --save-dev
rollup.config.js
1
import {terser} from 'rollup-plugin-terser'
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',//输出文件的路径和名称
7
format: 'es',
8
plugins: [terser()],
9
},
10
plugins: [resolve(), commonjs()],
11
external: ['lodash']
12
}

打包之后生成的bundle.js文件如下:

bundle.js
1
import o from "lodash";
2
3
function r(r, t) {
4
return o.add(r, t)
5
}
6
7
export {r as sumA};

重命名alias

1
pnpm install @rollup/plugins-alias
rollup.config.js
1
import alias from "@rollup/plugin-alias";
2
import path from "path";
3
4
export default {
5
input: 'src/main.js',
6
output: {
7
file: 'dist/bundle.js',//输出文件的路径和名称
8
format: 'es',
9
},
10
plugins: [alias({
11
entries: [
12
{find: 'utils', replacement: path.resolve(__dirname, 'src/utils')},
13
]
14
})],
15
}

全局替换插件

1
pnpm install @rollup/plugin-replace
main.js
1
console.log(__TEST__)
2
3
document.getElementById('app').innerHTML = __TEST__;
main.js
1
import replace from '@rollup/plugin-replace'
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',//输出文件的路径和名称
7
format: 'es',
8
},
9
plugins: [
10
replace(
11
{
12
preventAssignment: true,
13
__TEST__: "123456",
14
}
15
)
2 collapsed lines
16
],
17
}

打包之后的文件输出结果:

bundle.js
1
console.log(123456);
2
3
document.getElementById('app').innerHTML = 123456;

eslint插件

1
pnpm install @rollup/plugin-eslint eslint

添加.eslintrc.js配置:

.eslintrc.js
1
// .eslintrc.js 示例,非正规项目使用
2
module.exports = {
3
"env": {
4
"browser": true,
5
"es2021": true
6
},
7
"extends": "eslint:recommended",
8
"parserOptions": {
9
"ecmaVersion": "latest",
10
"sourceType": "module"
11
},
12
}
rollup.config.js
1
import eslint from "@rollup/plugin-eslint";
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',//输出文件的路径和名称
7
format: 'es',
8
},
9
plugins: [
10
eslint({
11
throwOnError: true, // 设置eslint检查有错误的情况下会编译失败
12
}),
13
],
14
}

image插件

@rollup/plugin-image 插件可以将图片导入为 Base64 编码的字符串。

如果不想将图片处理为base64,而是作为文件额外的文件引入,可以使用@rollup/plugin-url,或者将图片复制到输出目录,可以使用rollup-plugin-copy

1
pnpm i @rollup/plugin-image
main.js
1
import img from "./images/avatar.png"
2
3
console.log(img)
rollup.config.js
1
import image from "@rollup/plugin-image";
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',//输出文件的路径和名称
7
format: 'es',
8
},
9
plugins: [
10
image()
11
],
12
}

strip插件

移除多余的console

1
pnpm i @rollup/plugin-strip
rollup.config.js
1
import image from "@rollup/plugin-image";
2
3
export default {
4
input: 'src/main.js',
5
output: {
6
file: 'dist/bundle.js',//输出文件的路径和名称
7
format: 'es',
8
},
9
plugins: [
10
image()
11
],
12
}

添加typescript

1
npm install tslib typescript @rollup/plugin-typescript --save-dev
src/main.ts
1
const myName: string = "cirry";
2
const age: number = 18;
3
console.log(age)
rollup.config.js
1
import typescript from '@rollup/plugin-typescript';
2
3
export default {
4
input: 'src/index.ts',
5
output: {
6
dir: 'output',
7
format: 'cjs'
8
},
9
plugins: [typescript()]
10
};
dist/bundle.js
1
(function () {
2
'use strict';
3
4
var age = 18;
5
console.log(age);
6
7
})();

生成ts配置文件:tsc --init

tsconfig.json
1
{
2
"compilerOptions": {
3
"target": "es5",
4
"module": "ESNext",
5
"strict": true,
6
"skipLibCheck": true,
7
"forceConsistentCasingInFileNames": true
8
}
9
}

打包cdn引入的包

src/main.js
1
import _ from 'lodash';
2
import $ from 'jquery';
3
console.log(_.concat([1,2,3],4,5));
4
console.log($);
5
export default 'main';
dist/index.html
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>rollup</title>
8
</head>
9
<body>
10
<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
11
<script src="https://cdn.jsdelivr.net/npm/jquery/jquery.min.js"></script>
12
<script src="bundle.js"></script>
13
</body>
14
</html>
rollup.config.js
1
import babel from 'rollup-plugin-babel';
2
import resolve from '@rollup/plugin-node-resolve';
3
import commonjs from '@rollup/plugin-commonjs';
4
export default {
5
input:'src/main.js',
6
output:{
7
file:'dist/bundle.cjs.js',//输出文件的路径和名称
8
format:'iife',//五种输出格式:amd/es6/iife/umd/cjs
9
name:'bundleName',//当format为iife和umd时必须提供,将作为全局变量挂在window下
10
globals:{
11
lodash:'_', //告诉rollup全局变量_即是lodash
12
jquery:'$' //告诉rollup全局变量$即是jquery
13
}
14
},
15
plugins:[
8 collapsed lines
16
commonjs(),
17
babel({
18
exclude:"node_modules/**"
19
}),
20
resolve(),
21
],
22
external:['lodash','jquery'],
23
}
本文标题:Rollup配置和常用插件
文章作者:Cirry
发布时间:2025-02-18
感谢大佬送来的咖啡☕
alipayQRCode
wechatQRCode