如何为React/ElectronJS应用永久禁用DevTools sourcemaps

使用ElectronJS结合React（基于create-react-app脚手架搭建）开发桌面应用时，每次启动项目控制台都会弹出sourcemap相关警告。
已知临时处理方式为启动后打开开发者工具设置页，取消勾选sourcemap启用选项，但该操作每次启动都需要重复执行，影响开发效率，需要可持久化生效的配置方案。

相关参考截图 #

• Sourcemap警告截图：
• DevTools sourcemap设置项截图：

现有项目配置 #

package.json scripts配置 #

通过npm run app命令启动项目，脚本配置如下：

"scripts": {
    "app": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\" \"npm run watch-css\"",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "build-css": "node-sass ./src/css/sass_css/ -o ./src/css/vanilla_css/",
    "watch-css": "nodemon -e scss -x \"npm run build-css\"",
    "eject": "react-scripts eject"
  },

现有webpack相关文件内容 #

#!/usr/bin/env node

/**
 * @param {string} command 要运行的进程
 * @param {string[]} args 命令行参数
 * @returns {Promise<void>}
 */
const runCommand = (command, args) => {
    const cp = require("child_process");
    return new Promise((resolve, reject) => {
        const executedCommand = cp.spawn(command, args, {
            stdio: "inherit",
            shell: true
        });

        executedCommand.on("error", error => {
            reject(error);
        });

        executedCommand.on("exit", code => {
            if (code === 0) {
                resolve();
            } else {
                reject();
            }
        });
    });
};

/**
 * @param {string} packageName  npm包名
 * @returns {boolean} 包是否已安装
 */
const isInstalled = packageName => {
    if (process.versions.pnp) {
        return true;
    }

    const path = require("path");
    const fs = require("graceful-fs");

    let dir = __dirname;

    do {
        try {
            if (
                fs.statSync(path.join(dir, "node_modules", packageName)).isDirectory()
            ) {
                return true;
            }
        } catch (_error) {
            // 无操作
        }
    } while (dir !== (dir = path.dirname(dir)));

    return false;
};

/**
 * @param {CliOption} cli 配置项
 * @returns {void}
 */
const runCli = cli => {
    const path = require("path");
    const pkgPath = require.resolve(`${cli.package}/package.json`);
    // eslint-disable-next-line node/no-missing-require
    const pkg = require(pkgPath);
    // eslint-disable-next-line node/no-missing-require
    require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
};

/**
 * @typedef {Object} CliOption
 * @property {string} name 显示名称
 * @property {string} package npm包名
 * @property {string} binName 可执行文件名
 * @property {boolean} installed 当前是否已安装
 * @property {string} url 主页地址
 */

/** @type {CliOption} */
const cli = {
    name: "webpack-cli",
    package: "webpack-cli",
    binName: "webpack-cli",
    installed: isInstalled("webpack-cli"),
    url: "https://github.com/webpack/webpack-cli"
};

if (!cli.installed) {
    const path = require("path");
    const fs = require("graceful-fs");
    const readLine = require("readline");

    const notify =
        "CLI for webpack must be installed.\n" + `  ${cli.name} (${cli.url})\n`;

    console.error(notify);

    let packageManager;

    if (fs.existsSync(path.resolve(process.cwd(), "yarn.lock"))) {
        packageManager = "yarn";
    } else if (fs.existsSync(path.resolve(process.cwd(), "pnpm-lock.yaml"))) {
        packageManager = "pnpm";
    } else {
        packageManager = "npm";
    }

    const installOptions = [packageManager === "yarn" ? "add" : "install", "-D"];

    console.error(
        `We will use "${packageManager}" to install the CLI via "${packageManager} ${installOptions.join(
            " "
        )} ${cli.package}".`
    );

    const question = `Do you want to install 'webpack-cli' (yes/no): `;

    const questionInterface = readLine.createInterface({
        input: process.stdin,
        output: process.stderr
    });

    process.exitCode = 1;
    questionInterface.question(question, answer => {
        questionInterface.close();

        const normalizedAnswer = answer.toLowerCase().startsWith("y");

        if (!normalizedAnswer) {
            console.error(
                "You need to install 'webpack-cli' to use webpack via CLI.\n" +
                    "You can also install the CLI manually."
            );

            return;
        }
        process.exitCode = 0;

        console.log(
            `Installing '${
                cli.package
            }' (running '${packageManager} ${installOptions.join(" ")} ${
                cli.package
            }')...`
        );

        runCommand(packageManager, installOptions.concat(cli.package))
            .then(() => {
                runCli(cli);
            })
            .catch(error => {
                console.error(error);
                process.exitCode = 1;
            });
    });
} else {
    runCli(cli);
}

两种持久化方案，按需选择：

方案1：关闭CRA开发环境sourcemap生成（零额外代码） #

项目根目录新建.env文件，写入如下配置：

GENERATE_SOURCEMAP=false

Create React App读取到该环境变量后，开发模式启动时不会生成sourcemap文件，从根源上避免sourcemap加载警告，无需每次手动调整DevTools设置。

方案2：Electron层预设DevTools配置（保留sourcemap生成，仅关闭警告） #

如果需要保留sourcemap供调试使用，仅屏蔽相关警告，可以在Electron主进程初始化BrowserWindow时，直接预设DevTools的全局偏好，一次配置永久生效：

// 保留原有BrowserWindow初始化逻辑
const mainWindow = new BrowserWindow({
  // 原有窗口配置（宽高、图标、preload路径等）全部保留
  webPreferences: {
    // 原有webPreferences配置（nodeIntegration、contextIsolation等）全部保留
    devTools: true
  }
})

// DevTools打开时自动写入偏好配置，关闭sourcemap解析
mainWindow.webContents.on('devtools-opened', () => {
  mainWindow.webContents.devToolsWebContents.executeJavaScript(`
    Common.settingModule.setPreference('javaScriptSourceMapsEnabled', false);
    Common.settingModule.setPreference('cssSourceMapsEnabled', false);
  `)
})

补充说明：你贴出的webpack配置文件实际是webpack-cli的默认启动引导脚本，并非项目自定义webpack配置。未执行npm run eject的CRA项目无需修改webpack相关逻辑，上述两个方案均可直接生效，改动成本最低。

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