升级MUI、Rollup、Node.js及npm时遇Sourcemap错误求助

核心问题 #

该错误是因为Rollup已启用sourcemap生成，但Terser插件在压缩代码时未同步生成对应的转换sourcemap，导致源映射链断裂。

具体修复步骤 #

1. 开启Rollup全局sourcemap配置 #

在rollup.config.js的顶层输出配置中，明确开启sourcemap（生产环境可设为'hidden'，但必须启用）：

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true // 关键配置，必须设置
  },
  // 其他配置项
};

2. 配置Terser插件生成sourcemap #

使用@rollup/plugin-terser时，需在插件参数中显式开启sourcemap：

import terser from '@rollup/plugin-terser';

export default {
  // 其他配置项
  plugins: [
    // 其他插件（如typescript插件需确保自身sourcemap开启）
    terser({
      sourcemap: true // 强制Terser生成对应sourcemap
    })
  ]
};

3. 同步TypeScript的sourcemap设置 #

检查tsconfig.json，确保compilerOptions中相关配置正确：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": false,
    // 其他编译配置
  }
}

4. 调整插件执行顺序 #

Rollup插件按顺序执行，需保证TypeScript处理插件在Terser之前运行，确保TS生成的sourcemap能被Terser继承处理：

plugins: [
  typescript(), // 先处理TypeScript，生成基础sourcemap
  terser({ sourcemap: true }) // 后压缩，基于TS的sourcemap生成最终映射
]

5. 清理缓存后重新构建 #

缓存可能导致sourcemap异常，执行以下命令清理后重新构建：

rm -rf node_modules/.cache
rm -rf dist
npm run build

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