Rollup 如何生成 Source Map？

推荐答案

在 Rollup 中生成 Source Map 非常简单，只需要在配置文件中设置 output.sourcemap 选项为 true 即可。以下是一个示例配置：

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

通过这种方式，Rollup 会在生成打包文件的同时生成一个对应的 .map 文件，该文件包含了源代码与打包后代码之间的映射关系。

本题详细解读

什么是 Source Map？

Source Map 是一种文件格式，它记录了打包后的代码与源代码之间的映射关系。通过 Source Map，开发者可以在调试时直接查看和调试原始的源代码，而不是打包后的代码。这对于调试和排查问题非常有帮助。

Rollup 如何生成 Source Map？

Rollup 通过 output.sourcemap 选项来控制是否生成 Source Map。当该选项设置为 true 时，Rollup 会在生成打包文件的同时生成一个 .map 文件。这个 .map 文件包含了源代码与打包后代码之间的映射关系。

配置示例

以下是一个完整的 Rollup 配置文件示例，展示了如何生成 Source Map：

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

在这个配置中，input 指定了入口文件，output.file 指定了输出文件的路径和名称，output.format 指定了输出格式（如 cjs、es 等），而 output.sourcemap 设置为 true，表示需要生成 Source Map。

生成的文件

执行上述配置后，Rollup 会生成两个文件：

1. bundle.js：打包后的代码文件。
2. bundle.js.map：Source Map 文件，包含了源代码与打包后代码之间的映射关系。

调试时使用 Source Map

在浏览器中调试时，如果启用了 Source Map，开发者工具会自动加载 .map 文件，并允许开发者直接查看和调试原始的源代码，而不是打包后的代码。这大大简化了调试过程。

其他相关选项

除了 output.sourcemap，Rollup 还提供了其他一些与 Source Map 相关的选项，例如：

• output.sourcemapFile：指定生成的 Source Map 文件的名称。
• output.sourcemapExcludeSources：是否在 Source Map 中包含源代码内容。

这些选项可以根据需要进行配置，以满足不同的开发需求。

总结

通过在 Rollup 配置中设置 output.sourcemap 选项为 true，可以轻松生成 Source Map 文件。这对于调试和排查问题非常有帮助，尤其是在处理复杂的打包代码时。