express - 如何让 Rollup 的内联源映射发挥作用？

Question

我正在做一件相当奇怪的事情，我在每个请求上都直接编译Javascript(请暂时假装这是一个合理的事情；不用说，它仅供内部开发使用) .

不幸的是，尽管我尝试了几种配置，但我无法使源映射工作。

我的快速路线如下:

app.get(`/js/${f.script}`, async (req, res) => {
  try {
    const bundle = await rollup.rollup({
      input: `./examples/src/${f.script}`,
      external: ['React', 'ReactDOM'],
      treeshake: false,
      plugins: [
        resolvePlugin({ jsnext: true, extensions: ['.js', '.jsx'] }),
        commonjsPlugin({ include: 'node_modules/**' }),
        babelPlugin({
          babelrc: false,
          presets: [
            [
              'env',
              { modules: false, targets: { browsers: ['last 2 versions'] } },
            ],
            'react',
          ],
          plugins: ['external-helpers', 'transform-class-properties'],
          exclude: 'node_modules/**',
        }),
      ],
    });

    const { code, map } = await bundle.generate({
      format: 'iife',
      sourcemap: 'inline',
      intro: `var process = {
        env : {
          NODE_ENV : 'development',
        }
      }`,
    });

    res.set('Content-Type', 'text/javascript');
    res.send(
      `${code}\n//@ sourceMappingURL=data:application/json;charset=utf-8,${map}`,
    );
    // eslint-disable-next-line no-console
    console.log(`Served ${f.script}`);
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('oh bad no no', e);
    res.sendStatus(500);
  }
});

这给我一个脚本，后面是:

//@ sourceMappingURL=data:application/json;charset=utf-8,{"version":3,"file":...

它很长，但在我相对未经训练的眼睛看来就像源图。浏览器完全忽略它。

我已经尝试过仅使用 sourcemap: 'inline' 而没有使用其他位，这不会在末尾附加任何源映射。我现在已经多次手动将生成的源映射“附加”到脚本末尾，但 Chrome 无法识别它。这里有一个简单的语法错误，还是我的整个方法错误？

Answer 1

你就快到了 - 你是对的，在使用 bundle.generate 时需要手动附加注释(如果你使用 bundle.write ，它会自动为你完成) code> 相反，但这在这里没有意义)。

很可能，JSON 导致数据 URI 无效，因此需要将其呈现为 base64。 map 对象附加了一个方法，可以让您轻松完成此操作:

res.send(
  `${code}\n//# sourceMappingURL=${map.toUrl()}`,
);

toUrl的实现可见here 。

请注意，我使用 //# 而不是 //@ — 两者都有效，但 //# 是正式的“首选” ' (根据 spec，//@ 是一个遗留工件)。