如何让Rollup的内联sourcemap在Express实时编译场景下生效？

我之前在开发环境里也折腾过类似的实时编译场景，完全懂你那种看着sourcemap内容就在那但浏览器就是不认的抓狂感！给你几个排查和解决的方向：

1. 先确认Sourcemap的输出格式是否合规 #

浏览器识别sourcemap的核心是JS文件末尾的注释格式和map内容的合法性：

• 必须用标准注释格式：//# sourceMappingURL=data:application/json;base64,...（注意是两个#号，不是单个），如果是你自己拼接的注释，别写错格式
• 把那段看起来像sourcemap的内容复制出来，在浏览器控制台里跑JSON.parse(你的map内容)，如果报错说明JSON结构有问题，大概率是编译时生成map的步骤出了错

2. 检查Express响应的Content-Type #

如果你的路由返回编译后的JS时，Content-Type没设对（比如设成了text/plain），浏览器会把它当成普通文本，不会解析里面的sourcemap注释。一定要在响应里明确设置：

res.set('Content-Type', 'application/javascript');

3. 浏览器端的设置别漏了 #

有时候不是代码的问题，是浏览器DevTools的开关没开：

• 打开Sources面板，找到右上角的设置图标，确保勾选了Enable JavaScript source maps
• 同时在Network面板勾选Disable cache，避免浏览器缓存了旧的无sourcemap的JS文件

4. 编译工具的配置要到位 #

假设你用Babel这类工具实时编译，一定要开启正确的sourcemap选项：

• 比如Babel要设置sourceMaps: 'inline'（直接把map嵌入到JS末尾，适合实时编译场景），而不是默认的false
• 如果是你自己写的编译逻辑，要确保把生成的sourcemap正确附加到JS代码的最后，不能有多余的换行或字符打断注释

给你个简单的Babel实时编译的Express路由示例参考：

const express = require('express');
const { transform } = require('@babel/core');
const app = express();

app.get('/dev-script.js', (req, res) => {
  // 这里可以换成读取本地文件的逻辑
  const rawCode = `
function handleClick() {
  console.log('实时编译的代码');
}
  `;

  const compileResult = transform(rawCode, {
    presets: ['@babel/preset-env'],
    sourceMaps: 'inline' // 关键：生成内联sourcemap
  });

  res.set('Content-Type', 'application/javascript');
  res.send(compileResult.code); // 这里的code已经包含了正确的sourcemap注释
});

app.listen(3000);

最后提一句：这种每次请求实时编译的方式只适合内部开发用，生产环境千万不能这么搞，性能损耗太大了！

内容的提问来源于stack exchange，提问作者futuraprime