如何使用 Rollup 构建 PWA？

推荐答案

// www.javascriptcn.com code example
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import { generateSW } from 'rollup-plugin-workbox';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    resolve(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    terser(),
    generateSW({
      swDest: 'dist/service-worker.js',
      globDirectory: 'dist',
      globPatterns: ['**/*.{html,js,css,json,ico,png,jpg}'],
      runtimeCaching: [
        {
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'images',
            expiration: {
              maxEntries: 10,
              maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
            },
          },
        },
      ],
    }),
  ],
};

本题详细解读

1. Rollup 配置基础

Rollup 是一个 JavaScript 模块打包器，特别适合用于构建库和应用程序。在构建 PWA 时，Rollup 可以帮助我们打包 JavaScript 文件，并生成一个高效的 bundle。

2. 插件介绍

• @rollup/plugin-node-resolve: 用于解析 node_modules 中的模块。
• @rollup/plugin-replace: 用于替换代码中的环境变量，例如 process.env.NODE_ENV。
• rollup-plugin-terser: 用于压缩和混淆 JavaScript 代码。
• rollup-plugin-workbox: 用于生成 Service Worker 文件，这是 PWA 的核心部分。

3. Service Worker 配置

generateSW 是 rollup-plugin-workbox 提供的一个插件，用于生成 Service Worker 文件。它允许我们配置缓存策略、预缓存文件等。

• swDest: 生成的 Service Worker 文件路径。
• globDirectory: 需要缓存的静态资源目录。
• globPatterns: 需要缓存的静态资源文件类型。
• runtimeCaching: 运行时缓存策略，例如对图片使用 CacheFirst 策略。

4. 构建流程

1. 输入文件: src/main.js 是入口文件。
2. 输出文件: dist/bundle.js 是打包后的文件。
3. 插件执行顺序:
   • resolve 解析模块依赖。
   • replace 替换环境变量。
   • terser 压缩代码。
   • generateSW 生成 Service Worker 文件。

5. 运行构建

在终端中运行以下命令来构建项目：

rollup -c

这将根据 rollup.config.js 配置文件生成打包后的文件，并生成 Service Worker 文件，最终实现一个基本的 PWA 应用。