rollup：基于模块的 JS 打包利器

rollup 简介

rollup 是一款 JavaScript 模块打包工具，它可以将多个 JavaScript 模块打包成一个或多个文件。rollup 的主要特点是：

• 模块化： rollup 采用 ES6 原生的模块机制进行模块打包，这使得它可以很好地支持模块化的开发方式。
• 轻量： rollup 非常轻量，它的代码量只有几十 KB，这使得它可以在任何环境中轻松使用。
• 高效： rollup 的打包速度非常快，这使得它可以快速地构建大型项目。
• 灵活性： rollup 非常灵活，它可以根据不同的需求进行配置，这使得它可以适用于各种不同的项目。

rollup 的基本使用

rollup 的基本使用非常简单，只需要三个步骤：

1. 安装 rollup： 使用 npm 安装 rollup：

npm install --save-dev rollup

2. 创建配置文件： 创建一个 rollup.config.js 文件，并添加以下内容：

import rollup from "rollup";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import terser from "@rollup/plugin-terser";

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

3. 运行 rollup： 在终端中执行以下命令：

rollup -c rollup.config.js

执行完以上命令后，rollup 将会把 src/index.js 文件打包成 dist/index.js 文件。

rollup 的常见问题

在使用 rollup 时，可能会遇到一些常见的问题，以下是一些常见问题的解决办法：

1. 无法解析模块： 这个问题可能是因为没有安装相应的依赖项。可以尝试运行以下命令安装依赖项：

npm install --save-dev rollup-plugin-node-resolve

2. 无法打包 commonjs 模块： 这个问题可能是因为没有安装相应的依赖项。可以尝试运行以下命令安装依赖项：

npm install --save-dev rollup-plugin-commonjs

3. 打包后的代码体积太大： 这个问题可能是因为没有使用压缩插件。可以尝试在 rollup.config.js 文件中添加以下插件：

terser()

结语

rollup 是一款非常好用的 JavaScript 模块打包工具，它可以帮助您快速构建库、框架或应用程序。如果您正在寻找一款轻量、高效且灵活的 JavaScript 模块打包工具，那么 rollup 是一个非常好的选择。