配置
多入口打包
此场景适用于文件打包为多个类型供第三方引用，或者多入口多文件打包。
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
启动本地服务功能
1
npm install rollup-plugin-serve --save-dev
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
};
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
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
}
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使用，打包之后的文件无法直接使用。
1
import _ from 'lodash'
2
3
export function sumA(a, b) {
4
return _.add(a, b)
5
}
打包生成结果如下：
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。
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
}
这样打包出来的结果就是符合我们可以预期使用的文件了。
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来配置。
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
}
这样打包之后的文件，还是和之前一样：
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
1
import "./style.css"
2
let sum = (a, b) => a + b;
3
let result = sum(1, 2);
4
console.log(result);
1
body{
2
background: red;
3
}
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代码压缩
1
npm install @rollup/plugin-terser --save-dev
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文件如下：
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
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
1
console.log(__TEST__)
2
3
document.getElementById('app').innerHTML = __TEST__;
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
}
打包之后的文件输出结果：
1
console.log(123456);
2
3
document.getElementById('app').innerHTML = 123456;
eslint插件
1
pnpm install @rollup/plugin-eslint eslint
添加.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
}
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
1
import img from "./images/avatar.png"
2
3
console.log(img)
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
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
1
const myName: string = "cirry";
2
const age: number = 18;
3
console.log(age)
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
};
1
(function () {
2
'use strict';
3
4
var age = 18;
5
console.log(age);
6
7
})();
生成ts配置文件：tsc --init
1
{
2
"compilerOptions": {
3
"target": "es5",
4
"module": "ESNext",
5
"strict": true,
6
"skipLibCheck": true,
7
"forceConsistentCasingInFileNames": true
8
}
9
}
打包cdn引入的包
1
import _ from 'lodash';
2
import $ from 'jquery';
3
console.log(_.concat([1,2,3],4,5));
4
console.log($);
5
export default 'main';
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>
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
}