Rollup的使用详解

Rollup是一款针对ES6模块进行打包的工具，可以将多个模块打包成一个单一的JS文件，减小JS文件的体积，提高网页的加载速度。以下是Rollup使用的详细步骤：

1.安装Rollup

使用npm安装Rollup：

npm install -g rollup

2.创建JS模块

创建JS模块文件，例如test.js，文件中定义了一个函数：

export function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

3.创建入口文件

创建入口文件example.js，将test.js导入，并调用sayHello函数：

import {sayHello} from './test.js';
sayHello('Rollup');

4.使用Rollup打包

在命令行中执行以下命令，将example.js打包成一个单一的JS文件：

rollup -i example.js -o bundle.js -f umd

或者将其作为npm script执行：

"scripts": {
    "build": "rollup -i example.js -o bundle.js -f umd"
}

执行：

npm run build

5.使用打包后的JS文件

在HTML文件中引入打包后的JS文件bundle.js：

<script src="bundle.js"></script>

页面加载后，调用sayHello函数：

sayHello('Rollup');

Rollup还有很多高级的使用方式，如插件、配置文件等，可以根据实际需求进行学习和使用。