Rollup相比于其他Web的编译工具来说，它的配置更加的简单，可以方便使用在创建一些简单的Web小工具中。

1. 安装Rollup

使用命令：

    npm i rollup -D

把rollup加入到运行环境中。

为了方便我们使用ES6的语法，我们还有导入Rollup的Babel插件

npm i @rollup/plugin-node-resolve @rollup/plugin-babel -D

在加入Babel的依赖：

npm i @babel/preset-env -D

2. 运行Rollup

1. 准备我们要测试编译的文件test.js

test.js

class Parent {
    
    constructor() {
        this.msg = '我是父类';
    }

    sayHi() {
        console.log(this.msg);
    }
}

class Child extends Parent {
    
    constructor() {
        this.msg = '我是子类';
    }
}

let child = new Child();
child.sayHi();

let arr = [1, 2, 3].filter(item=>item>1);
console.log(arr);

这里我们测试两种情况，ES的类和Lamda表达式

2. Rollup的配置文件：rollup.config.mjs

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';



export default {
  input: 'src/test.js',
  plugins: [
    resolve(),
    babel({ babelHelpers: 'bundled' })
  ],
  output: {
    file: `dist/test.js`,
    format: 'iife'
  }
};

3. 配置Babel文件

增加.babelrc文件：

{
    "presets": [
      ["@babel/env", {"modules": false}]
    ]
  }

运行脚本

使用

rollup -c rollup.config.mjs

运行脚本

运行完成后dist目录会生成test.js。