rollup 实战第二节搭建开发环境：快速上手 rollup

2023-11-04 16:33:23

前言

在上一篇文章中，我们介绍了 rollup 的基本概念和原理。在本篇文章中，我们将介绍如何搭建 rollup 的开发环境，以便你能够快速上手使用 rollup 进行项目开发。文中包含了 rollup 的安装、配置以及一些常用的插件的使用方法。

安装

首先，你需要安装 rollup。你可以通过以下命令安装：

npm install -g rollup

安装完成后，你可以在命令行中输入 rollup -v 来查看 rollup 的版本号。

配置

在安装完 rollup 之后，你需要创建一个配置文件。配置文件的名称通常是 rollup.config.js。配置文件中包含了 rollup 的各种配置项，比如输入文件、输出文件、插件等等。

以下是一个简单的 rollup 配置文件示例：

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'umd',
  },
  plugins: [
    resolve(),
    commonjs(),
  ],
};

在这个配置文件中，我们指定了输入文件、输出文件、输出格式以及要使用的插件。

插件

rollup 提供了许多插件来帮助你进行各种任务，比如解析代码、打包代码、压缩代码等等。

在上一篇文章中，我们介绍了 rollup 的一些常用插件，比如 @rollup/plugin-node-resolve、@rollup/plugin-commonjs 和 @rollup/plugin-babel。

在本文中，我们将详细介绍如何使用这些插件。

@rollup/plugin-node-resolve

@rollup/plugin-node-resolve 插件可以帮助你解析模块。当 rollup 打包你的代码时，它会遇到一些模块，这些模块可能没有被安装到你的项目中。这时，@rollup/plugin-node-resolve 插件就会发挥作用，它会帮助你解析这些模块，并将其安装到你的项目中。