Rollup 插件入门：新手必读教程-原创手记-慕课网

概述

Rollup 是一款强大的模块打包工具，支持 ES 模块并具备丰富的插件生态系统。本文将详细介绍 Rollup 的基本功能和优势，并指导你如何安装和配置 Rollup，帮助你快速上手。通过本文，你将学会如何使用 Rollup 插件入门。

Rollup 是什么

Rollup 是一款模块打包工具，主要用于将 JavaScript 模块打包成一个或多个文件，适用于库和应用。它支持 ES 模块标准，并且可以将现代 JavaScript 代码转换为可以被旧版浏览器支持的格式。

主要功能和优势

模块化支持：Rollup 支持 ES 模块，可以处理 import 和 export 语句。例如，可以在一个文件中导出消息，然后在另一个文件中导入并使用该消息。
```
// src/index.js
export const message = 'Hello, Rollup!';

// src/anotherFile.js
import { message } from './index';

console.log(message);  // 输出 "Hello, Rollup!"
```
树形打包：Rollup 会分析代码依赖关系，将模块按依赖关系进行打包。
代码分割：Rollup 可以将代码分割成多个文件，以优化加载性能。
异步加载支持：Rollup 可以将异步加载的模块处理成动态导入，提高应用的加载速度。
插件生态系统：Rollup 有着丰富的插件生态系统，可以支持各种构建需求。
树摇：Rollup 可以删除未使用的代码，从而减少打包文件的体积。

安装和配置 Rollup

如何安装 Rollup

使用 npm 安装 Rollup 可以通过以下命令完成：

npm install --save-dev @rollup/cli

配置基础的 Rollup 项目

创建一个新的项目文件夹并初始化 npm：

mkdir my-rollup-project
cd my-rollup-project
npm init -y

安装 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs 插件来支持非 ES 模块的依赖：

npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs

在项目根目录下创建一个 rollup.config.js 配置文件，设置输入输出选项：

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

export default {
  input: 'src/index.js',  // 入口文件
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

创建 src 目录和 index.js 文件：

mkdir src
touch src/index.js

在 index.js 文件中编写简单的代码：

// src/index.js
export const message = 'Hello, Rollup!';

使用 rollup 命令进行打包：

npx rollup -c

这将使用 rollup.config.js 中的配置将 src/index.js 文件打包到 dist/bundle.js。

基本概念和术语

插件

Rollup 插件是扩展 Rollup 功能的模块。插件可以自定义 Rollup 的构建过程，比如转换代码、处理依赖、优化文件等。插件通过 plugins 数组添加到 Rollup 配置中。

示例插件：

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

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

输入和输出选项

输入选项 (input) 指定入口文件，即构建的起点。

input: 'src/index.js',

输出选项 (output) 定义打包文件的输出路径和格式。

output: {
  file: 'dist/bundle.js',
  format: 'esm'
}

外部依赖

外部依赖是指项目中引用但不包含在最终输出中的外部模块。这些模块通常在运行时从全局作用域中加载。外部依赖可以通过 external 选项指定。

示例：

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  external: ['lodash'],  // 不打包 lodash 模块
  plugins: [
    resolve(),
    commonjs()
  ]
};

常见插件介绍

如何使用 babel 插件

Babel 插件可以将现代 JavaScript 转换成兼容旧版浏览器的代码。安装 Babel 插件：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

在 rollup.config.js 中配置 Babel 插件：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      presets: ['@babel/preset-env'],
      plugins: [],
      babelrc: false,  // 禁用 .babelrc 文件
      exclude: 'node_modules/**'  // 跳过 node_modules 文件
    })
  ]
};

示例代码展示如何使用 Babel 插件处理现代 JavaScript：

// src/index.js
export default ['a', 'b'].map(item => `Hello, ${item}`);

如何使用 ts 插件

TypeScript 插件可以将 TypeScript 代码编译成 JavaScript 代码。安装 TypeScript 插件：

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

在 rollup.config.js 中配置 TypeScript 插件：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript()
  ]
};

注意将入口文件从 index.js 改为 index.ts。

示例代码展示如何使用 TypeScript 插件处理 TypeScript 代码：

// src/index.ts
export const message = 'Hello, TypeScript!';

如何使用 css 插件

Rollup 可以通过插件处理 CSS 文件。安装 rollup-plugin-postcss 插件来处理 CSS：

npm install --save-dev rollup-plugin-postcss

在 rollup.config.js 中配置 postcss 插件：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    postcss({
      extract: true,  // 提取 CSS 文件
      minimize: true, // 压缩 CSS
      sourceMap: true // 生成 source map
    })
  ]
};

在 src 目录下创建一个 style.css 文件：

/* src/style.css */
body {
  background-color: #f0f0f0;
}

在 index.js 文件中引用 CSS 文件：

// src/index.js
import './style.css';

构建和运行项目

如何执行构建命令

在命令行中执行构建命令：

npx rollup -c

这将使用 rollup.config.js 中的配置进行构建，生成 dist/bundle.js 文件。

如何调试构建错误

如果构建过程中遇到错误，Rollup 会输出错误信息和源代码的位置。可以通过以下几种方式调试：

检查配置文件：确保 rollup.config.js 中的配置正确无误。
检查入口文件：确保入口文件存在且路径正确。
检查外部依赖：确保所有外部依赖都已安装。
使用调试插件：某些插件提供调试功能，如 rollup-plugin-terser 提供 comments: true 选项以保留注释信息。

示例代码展示如何调试错误：

// 示例代码展示如何调试错误
// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

如果构建时遇到错误，可能是因为 resolve 插件配置有误。确保 resolve 插件已正确导入并使用。

Rollup 发布和部署

如何发布项目到 npm

安装 lerna 和 npm 工具：

npm install --save-dev lerna npm

创建 package.json 文件：

{
  "name": "my-rollup-project",
  "version": "1.0.0",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "npx rollup -c"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^5.2.1",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-typescript": "^5.0.0",
    "rollup-plugin-postcss": "^4.1.0",
    "@rollup/cli": "^2.36.2",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "typescript": "^4.3.5"
  }
}

发布项目到 npm：

npm login
npm publish

如何使用 Rollup 项目进行部署

部署 Rollup 项目可以使用静态文件托管服务，如 GitHub Pages 或 Netlify。

GitHub Pages

创建 GitHub Pages 仓库：

git clone https://github.com/username/username.github.io
cd username.github.io

构建并部署项目：

npx rollup -c
cp dist/bundle.js ./
git add .
git commit -m "Deploy to GitHub Pages"
git push origin master

Netlify

创建 Netlify 项目：
- 登录 Netlify 控制台
- 创建新网站
- 将本地代码推送到 GitHub 或 GitLab
构建并部署项目：
- 在 Netlify 中设置构建命令：
```
npx rollup -c
```
- 构建的文件将自动托管在 Netlify。