开发Office任务窗格插件时Azure SDK凭证类编译报错：child_process未找到

问题根源 #

@azure/identity包默认包含了仅适用于Node.js环境的凭证实现（比如AzureDeveloperCliCredential），而Office任务窗格插件运行在浏览器环境中，webpack打包时会尝试解析这些Node.js专属模块，导致出现child_process找不到的错误——因为浏览器环境根本不支持这类Node核心模块。

解决方案 #

1. 仅使用浏览器兼容的凭证类型 #

放弃DefaultAzureCredential（它会自动包含Node.js专属的凭证），直接使用浏览器环境支持的InteractiveBrowserCredential，这是最直接的解决方式，避免打包不必要的Node.js模块。

示例代码：

import { InteractiveBrowserCredential } from "@azure/identity";
import { SecretClient } from "@azure/keyvault-secrets";

// 初始化浏览器环境的凭证
const credential = new InteractiveBrowserCredential({
  tenantId: "你的租户ID",
  clientId: "你的Azure AD应用客户端ID",
  redirectUri: "https://localhost:3000/redirect" // 需与Azure AD应用中配置的重定向URI一致
});

// 初始化KeyVault客户端
const secretClient = new SecretClient(
  "https://你的密钥保管库名称.vault.azure.net/",
  credential
);

// 示例：获取密钥
async function fetchSecret() {
  try {
    const secret = await secretClient.getSecret("你的密钥名称");
    console.log("获取到的密钥值：", secret.value);
  } catch (err) {
    console.error("获取密钥失败：", err);
  }
}

2. 配置webpack适配浏览器环境 #

如果必须使用DefaultAzureCredential（比如需要兼容多环境），需要修改webpack配置，排除Node.js核心模块，并明确指定打包目标为浏览器：

修改webpack.config.js：

module.exports = {
  // 明确打包目标为浏览器环境
  target: "web",
  resolve: {
    fallback: {
      // 将Node.js专属模块设置为false，告诉webpack不要尝试解析它们
      "child_process": false,
      "fs": false,
      "path": false,
      "os": false,
      "crypto": require.resolve("crypto-browserify") // 如果需要crypto模块，需安装crypto-browserify
    }
  },
  // 其他原有配置（entry、output等）...
};

注意：如果代码中用到crypto模块，需要先安装依赖：

npm install crypto-browserify --save-dev

3. 避免修改node_modules源码 #

不要直接注释azureDeveloperCliCredential.js中的代码，这会破坏包的内部依赖关系，引发更多连锁错误——正确的做法是通过webpack配置或选择合适的凭证类型来规避问题。

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