Rollup 中如何配置 sourcemap 选项？

推荐答案

在 Rollup 中配置 sourcemap 选项可以通过在 rollup.config.js 文件中设置 output.sourcemap 属性来实现。以下是一个示例配置：

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: true, // 启用 sourcemap
  },
};

在这个配置中，sourcemap: true 会为生成的 bundle.js 文件生成一个对应的 .map 文件，用于调试时映射回原始源代码。

本题详细解读

1. sourcemap 的作用

sourcemap 是一种用于将压缩或编译后的代码映射回原始源代码的技术。它在前端开发中非常有用，尤其是在调试时，开发者可以直接在浏览器中查看和调试原始代码，而不是压缩后的代码。

2. Rollup 中的 sourcemap 配置

在 Rollup 中，sourcemap 选项可以通过 output.sourcemap 属性来配置。该属性可以接受以下值：

• true：生成一个独立的 .map 文件。
• 'inline'：将 sourcemap 作为 Data URL 直接嵌入到生成的 bundle 文件中。
• 'hidden'：生成 sourcemap 文件，但不将其链接到生成的 bundle 文件中。

3. 示例配置

生成独立的 .map 文件

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: true,
  },
};

将 sourcemap 内联到 bundle 文件中

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: 'inline',
  },
};

生成但不链接 sourcemap 文件

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: 'hidden',
  },
};

4. 注意事项

• 启用 sourcemap 会增加构建时间，并且在生产环境中可能会暴露源代码结构，因此建议在生产环境中禁用 sourcemap。
• 如果使用 sourcemap: 'inline'，生成的 bundle 文件会包含 sourcemap 数据，这可能会显著增加文件大小。

通过以上配置，开发者可以根据需求灵活地控制 Rollup 的 sourcemap 生成行为。