如何使用 Rollup.js 打包项目

rollup.js 运行原理与流程

Rollup.js 的运行原理核心流程涉及多个步骤，这些步骤共同协作以将输入的多个模块打包成一个或多个输出文件。以下是 Rollup.js 的核心运行流程：

解析配置文件‌：

Rollup.js 首先读取并解析 rollup.config.js（或指定的配置文件），以获取打包的输入、输出、插件等配置信息。

构建模块图（Module Graph）‌：

根据配置中的 input 属性指定的入口文件，Rollup.js 开始递归地解析和构建模块图。它使用解析插件（如 @rollup/plugin-node-resolve）来定位并加载模块依赖项，包括从 node_modules 中解析第三方库。

转换模块‌：

在构建模块图的过程中，Rollup.js 会应用配置的插件来转换模块内容。例如，@rollup/plugin-babel 可以用于将 ES6+ 代码转换为兼容旧版 JavaScript 的代码。其他插件如 @rollup/plugin-replace 可以用于替换模块中的特定字符串或变量。

生成代码块（Code Splitting）‌：

如果配置了代码分割，Rollup.js 会将模块图分割成多个代码块，以便按需加载或优化性能。

打包输出‌：

一旦模块图构建完成并经过转换，Rollup.js 会根据配置中的 output 属性生成输出文件。输出格式可以是 IIFE、ESM（ES Module）、CJS（CommonJS）等。在这个过程中，Rollup.js 还会应用如 terser 这样的插件来压缩和优化代码。

写入文件系统‌：

最后，Rollup.js 将生成的输出文件写入到指定的目录（通常是 dist 目录）。

‌插件执行‌：
在整个流程中，插件会在适当的时机被调用。例如，解析插件在构建模块图时被使用，转换插件在转换模块时被使用，而优化插件（如 terser）则在打包输出前被使用。

‌缓存和性能优化‌：
Rollup.js 还支持缓存以加速后续的打包过程。当配置或依赖项没有变化时，它可以使用缓存来避免重新解析和转换模块。

综上所述，Rollup.js 的核心流程是一个高度可配置和可扩展的打包过程，它允许开发者通过配置文件和插件来定制打包行为以满足各种项目的需求。

使用 Rollup.js 打包项目通常涉及以下几个步骤：

‌安装使用 Rollup.js‌：

首先，你需要在你的项目中安装 Rollup.js 及其相关依赖。你可以使用 npm 或 yarn 来安装它。

bash

npm install --save-dev rollup

或者

bash

yarn add --dev rollup

‌创建 Rollup 配置文件‌：

Rollup 使用一个配置文件（通常是 rollup.config.js）来定义打包的输入、输出和插件等配置。你需要在这个文件中指定你的入口文件、输出格式、目标环境以及任何你希望使用的插件。

javascript

// rollup.config.js
export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'iife', // 输出格式，例如 'iife', 'esm', 'cjs' 等
    name: 'MyBundle' // 全局变量名称（对于 IIFE/UMD 输出）
  },
  plugins: [
    // 在这里添加你需要的插件，例如 Babel, Terser 等
  ]
};

‌添加插件‌：

Rollup 有一个丰富的插件生态系统，你可以根据需要添加各种插件来处理你的代码。例如，你可以使用 @rollup/plugin-babel 来转换 ES6 代码，使用 @rollup/plugin-terser 来压缩你的输出文件等。

bash

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

然后在你的配置文件中引入并使用这些插件：

javascript

import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  // ... 其他配置 ...
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env']
    }),
    terser() // 压缩输出文件
  ]
};

运行 Rollup‌：

一旦你的配置文件设置好了，你就可以通过命令行运行 Rollup 来打包你的项目了。

bash

npx rollup -c

-c 参数告诉 Rollup 使用 rollup.config.js 作为配置文件。你也可以在 package.json 中添加一个脚本来简化这个过程：

json

{
  "scripts": {
    "build": "rollup -c"
  }
}

然后你就可以通过运行 npm run build 或 yarn build 来打包你的项目了。

‌调试和优化‌：

根据你的项目需求，你可能需要调整 Rollup 的配置，添加或移除插件，或者修改 Babel 的配置等。在开发过程中，你可以使用 Rollup 的 --watch 选项来自动重新打包你的代码，或者使用开发服务器（如 rollup-plugin-serve）来更方便地测试和调试你的应用。

Rollup.js有哪些常用插件？

Rollup.js 拥有一个丰富的插件生态系统，这些插件可以帮助开发者在打包过程中实现各种功能，如代码转换、压缩、优化、加载非 JavaScript 资源等。以下是一些常用的 Rollup.js 插件：

‌@rollup/plugin-babel‌：

这个插件允许你使用 Babel 来转换你的 JavaScript 代码，使其兼容旧版本的浏览器或添加其他 Babel 转换（如将 JSX 转换为 JavaScript）。

‌@rollup/plugin-terser‌：

Terser 是一个 JavaScript 解析器、mangle/压缩工具包，用于优化和缩小 JavaScript 代码。这个插件将 Terser 集成到 Rollup 中，以便在打包过程中压缩代码。

‌‌@rollup/plugin-node-resolve‌：

这个插件允许你加载第三方模块（node_modules 中的包）并将其包含在打包后的文件中。它解析模块路径，使 Rollup 能够找到并打包这些依赖项。

‌@rollup/plugin-commonjs‌：

这个插件允许 Rollup 打包使用 CommonJS 模块语法的代码。由于许多 npm 包仍然使用 CommonJS，因此这个插件在将现有库迁移到 Rollup 时非常有用。

‌‌rollup-plugin-peer-deps-external‌：

这个插件自动将 peerDependencies 中的依赖项标记为外部依赖，这样 Rollup 就不会将它们打包到最终的输出中。这对于避免打包重复依赖和减小输出文件大小非常有帮助。

‌@rollup/plugin-url‌：

这个插件允许你将文件作为 URL 导入，这对于在 JavaScript 中直接包含图像、字体或其他非代码资源非常有用。

‌‌rollup-plugin-serve‌：

这个插件提供了一个简单的开发服务器，可以在本地预览你的打包结果。它还支持热模块替换（HMR），使你可以在修改代码后自动刷新浏览器。

‌‌rollup-plugin-livereload‌：

这个插件与 rollup-plugin-serve 类似，但它还添加了实时重新加载功能。当你在源代码中做出更改时，它会自动刷新浏览器以反映这些更改。

‌‌@rollup/plugin-replace‌：

这个插件允许你在打包过程中替换代码中的变量或字符串。这对于在开发环境和生产环境之间切换配置非常有用。

‌‌@rollup/plugin-alias‌：

这个插件允许你为模块路径设置别名，使你可以更方便地引用项目中的文件或模块。

这些只是 Rollup.js 插件生态系统中的一小部分。根据你的项目需求，你可能还会发现其他有用的插件。在选择插件时，请确保它们与你的 Rollup 版本兼容，并仔细阅读它们的文档以了解如何使用它们。