如何在CRA构建的React应用中调试Rollup打包的自定义React库

问题根因 #

断点失效、打开非本地源文件的核心原因是VS Code调试器无法将sourcemap中记录的源文件路径，映射到你本地工作区的实际文件路径，按以下步骤调整配置即可解决：

1. 修正lib包Rollup配置 #

统一sourcemap生成规则，移除重复、错误的路径配置：

import path from 'path';
import styles from 'rollup-plugin-styles';
import esbuild from 'rollup-plugin-esbuild-transform';
import packageJson from './package.json';

const config = {
    input: './src/index.ts',
    output: [
        {
            file: packageJson.module,
            format: 'esm',
            name: 'selftest',
            sourcemap: true,
            // 统一配置sourceRoot，指向lib包的src目录
            sourceRoot: path.resolve(__dirname, 'src')
        },
    ],
    plugins: [
        styles(),
        esbuild([
            {
                loader: 'json',
                minifyWhitespace: true
            },
            {
                loader: 'ts'
            },
            {
                loader: 'tsx',
                banner: "import * as React from 'react'"
                // 移除重复的sourcemap、sourceRoot配置，统一由Rollup输出层管理
            },
            {
                loader: 'js',
                include: /\.[jt]sx?$/,
                target: 'es2017'
                // 移除重复的sourcemap配置
            }
        ])
    ],
    external: [
        'react', 'react-dom', // 补充react为外部依赖，避免重复打包
    ],
}
export default config;

2. 修正VS Code launch.json调试配置 #

重点修正根路径映射，新增sourcemap路径匹配规则：

{
    "name": "Attach to Edge",
    "port": 9222,
    "request": "attach",
    "type": "pwa-msedge",
    // 修正webRoot为app项目的根目录，而非工作区根目录
    "webRoot": "${workspaceFolder}/app",
    "trace": true,
    "sourceMaps": true,
    "runtimeArgs": [],
    "outFiles": [
        "${workspaceFolder}/app/build/**/*.js",
        "${workspaceFolder}/lib/dist/**/*.js" // 替换为lib包实际输出的js路径，避免硬编码绝对路径
    ],
    // 新增sourcemap路径映射规则，将webpack打包后引用的lib源码路径映射到本地实际路径
    "sourceMapPathOverrides": {
        // 请将下方的<your-lib-package-name>替换为你lib包package.json中定义的name字段值
        "webpack://_N_E/./node_modules/<your-lib-package-name>/src/*": "${workspaceFolder}/lib/src/*",
        "webpack:///./node_modules/<your-lib-package-name>/src/*": "${workspaceFolder}/lib/src/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "*": "${webRoot}/*"
    }
}

如果不确定映射规则怎么写，可在调试时打开VS Code调试控制台，输入.scripts命令，就能看到所有加载的源文件路径，对照调整即可。

3. 补充app项目调试配置 #

在app根目录新建.env文件，确保webpack处理node_modules中link的lib包的sourcemap：

GENERATE_SOURCEMAP=true
# 若使用CRA 5+，补充以下配置
FAST_REFRESH=false

生效步骤 #

• 重新执行lib包的构建命令，生成新的产物和sourcemap
• 重启app的开发服务，清除缓存
• 重启VS Code调试会话，再次尝试打断点

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