Rollup配置和常用插件

配置

多入口打包

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

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
}