返回

快速上手 Rollup 的开发与配置文件指南

前端

如今，人们开发和部署应用程序的方式变得更加复杂，JavaScript 作为一种可行的解决方案，已经可以运行于服务器与浏览器，为了更好地提升效率，可将 JavaScript 分成多个较小的模块，而在引入时再进行集成，降低了应用程序的整体复杂度。

在这种背景下，Rollup 应运而生，它是一款业界领先的 JavaScript 模块打包器，利用 Rollup，可以将小块代码打包编译成大块复杂的代码。

Rollup 简介

Rollup 与当下常见的 RequireJS 与 Browserify 相比，存在多项优点，诸如更快的构建速度、更小的最终包体积、更卓越的代码质量与更棒的开发者体验。同时，Rollup 还支持使用 ES Module 的新标准，这与 CommonJS 等旧的社区模块化方案形成了显著差异。

Rollup 的主要思想是将不同的 JavaScript 模块编译并捆绑成单个文件。开发人员通常将其导入到 HTML 文件中，再由 Web 浏览器负责加载。

值得注意的是，Rollup 并非旨在用于处理前端脚本。该工具可用于各种项目，包含用于服务端或其他环境中的 JavaScript。

Rollup 的快速入门

假定当前已有 JavaScript 模块存在，现可按照以下步骤使用 Rollup 进行打包：

  1. 安装 Rollup CLI 工具：
npm install -g rollup
  1. 在项目的根目录下创建一个名为 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/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript()
  ]
};
  1. 运行 Rollup 以构建项目：
rollup -c

构建完成后，打包后的代码将位于 dist/bundle.js 文件中。

Rollup 配置文件

除了上述 Rollup 的快速入门外，更详细的配置文件信息亦十分重要，它允许开发人员更好地自定义 Rollup 的行为。

1. 输入选项 (input)

input 选项指定了 Rollup 应该处理的入口文件。它可以是一个字符串（指向单个文件的路径）或一个数组（指向多个文件的路径）。

2. 输出选项 (output)

output 选项用于指定 Rollup 应该如何输出打包后的代码。它可以包含以下几个子选项：

  • file：指定输出文件的路径。
  • format：指定输出文件的格式，它可以是：
    • amd：用于 AMD 模块。
    • cjs：用于 CommonJS 模块。
    • esm：用于 ES 模块。
    • iife：用于立即调用函数表达式（IIFE）。
    • system：用于 SystemJS 模块。
    • umd：用于通用模块定义（UMD）。
  • sourcemap：指定是否生成源映射文件。

3. 插件选项 (plugins)

plugins 选项用于指定 Rollup 在构建过程中应该使用哪些插件。这些插件可以帮助 Rollup 处理各种不同的任务，例如解析非 JavaScript 文件、转换代码或压缩代码。

4. 外部选项 (external)

external 选项用于指定 Rollup 在构建过程中应该忽略哪些模块。这些模块通常是已经存在于应用程序中的第三方库或框架。

5. 其他选项

除了上述几个选项之外，Rollup 还提供了许多其他选项，例如 watch 选项（用于监视文件的更改并自动重新构建）和 onwarn 选项（用于自定义 Rollup 发出的警告）。

Rollup SEO 优化

在使用 Rollup 打包代码时，务必要考虑 SEO 优化。因为打包后的代码通常会比原始代码更难被搜索引擎理解，所以我们需要采取一些措施来确保打包后的代码也能被搜索引擎正确索引。

以下是一些 Rollup SEO 优化技巧：

  1. 在输出的 HTML 文件中包含源映射文件，以帮助搜索引擎将打包后的代码映射回原始代码。
  2. 使用语义化的 HTML 元素和 CSS 类名，以帮助搜索引擎理解页面的内容。
  3. 避免使用重定向，因为这可能会导致搜索引擎无法正确索引页面。
  4. 确保打包后的代码是语义化和可读的，以便搜索引擎能够正确理解它的内容。
  5. 使用 Rollup 的 terser 插件来压缩代码，该插件可以帮助我们去除不必要的代码，从而减小代码的体积。

结语

Rollup 是一款强大的工具，可用于构建各种 JavaScript 项目。通过使用 Rollup 的配置文件，开发人员可以对其进行更细致的控制。文中还概述了 Rollup 的 SEO 优化技巧，帮助开发者构建出更易于搜索引擎理解的应用程序。

相关文章：