一篇文章带你从零快速上手Rollup

准备工作

在开始学习Rollup之前，需要先安装Node.js和npm，建议安装最新版本。

在终端输入以下命令检查是否安装成功：

node -v # 检查Node.js版本
npm -v  # 检查npm版本

安装Rollup

使用npm安装Rollup，终端输入以下命令：

npm install rollup --save-dev

基本使用

Rollup使用配置文件进行配置，通常命名为rollup.config.js。在项目的根目录下创建rollup.config.js文件，并输入以下代码：

export default {
  input: 'src/index.js', // 入口文件路径
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'umd' // 输出模块类型
  }
}

上述配置中，input表示入口文件，output表示输出文件，format表示输出的模块类型。

接着，在终端输入以下命令进行打包：

npx rollup -c

打包完成后，程序会生成一个名为bundle.js的文件。

插件介绍

除了基本的打包模块外，Rollup还支持使用插件进行增强功能。

以下是两个常见的Rollup插件：

@rollup/plugin-babel

@rollup/plugin-babel是一个与Babel一起使用的Rollup插件。它可以将ES6+的代码转换为ES5代码，从而提供更好的浏览器兼容性。

安装方法：

npm install @rollup/plugin-babel --save-dev

使用方法，在rollup.config.js中添加以下代码：

import babel from '@rollup/plugin-babel'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled'
    })
  ]
}

上述代码中，plugins表示使用的插件类型，在这里我们使用了babel插件，并且指定babelHelpers属性为bundled。

rollup-plugin-uglify

rollup-plugin-uglify是一个与UglifyJS一起使用的Rollup插件。它可以将代码压缩从而减少文件大小。

安装方法：

npm install rollup-plugin-uglify --save-dev

使用方法，在rollup.config.js中添加以下代码：

import { uglify } from 'rollup-plugin-uglify'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    uglify()
  ]
}

上述代码中，我们使用了uglify函数来使用该插件。

示例

以下是一个src/index.js文件的示例内容：

export const hello = () => console.log('Hello world!')

使用Rollup打包输出后的代码为：

(function () {
  'use strict';

  const hello = () => console.log('Hello world!');

  hello();

}());

结语

Rollup是一个非常优秀的打包工具，它可以让我们更好地管理代码依赖关系，并且可以使用丰富的插件进行功能增强。不过需要注意的是，Rollup并不是万能的，它只适合打包类库等规模不那么庞大的项目。