React开发Office Excel插件时.env文件失效问题求助

1. 适配webpack配置（Yeoman生成的插件项目） #

Office插件默认用webpack构建，不像Create React App自动处理.env，得手动注入环境变量：

• 安装dotenv依赖：npm install dotenv --save-dev
• 在webpack.config.js里添加配置：

const dotenv = require('dotenv');
const webpack = require('webpack');
dotenv.config();

module.exports = {
  // 保留原有其他配置
  plugins: [
    // 新增这行，把环境变量注入全局
    new webpack.DefinePlugin({
      'process.env.REACT_APP_API_KEY': JSON.stringify(process.env.REACT_APP_API_KEY)
    })
  ]
};

2. 检查.env文件规范 #

• 确保.env放在项目根目录（和package.json同级）
• 变量名必须以REACT_APP_开头，这是React生态的约定，Office插件也得遵守

3. Create React App搭建的插件项目适配 #

如果是用CRA搭的Office插件，不想eject的话用react-app-rewired改配置：

• 装依赖：npm install react-app-rewired dotenv --save-dev
• 根目录新建config-overrides.js：

const dotenv = require('dotenv');
const webpack = require('webpack');
dotenv.config();

module.exports = function override(config) {
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.REACT_APP_API_KEY': JSON.stringify(process.env.REACT_APP_API_KEY)
    })
  );
  return config;
};

• 修改package.json的脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 临时替代方案（不推荐明文，仅测试用） #

如果以上方法暂时没生效，可先通过全局变量过渡：

• 在src/index.js顶部加：

window.REACT_APP_API_KEY = process.env.REACT_APP_API_KEY;

• App.js里调用window.REACT_APP_API_KEY

5. 验证变量加载状态 #

在webpack.config.js里加个打印，确认.env是否被读取：

console.log('加载的API密钥:', process.env.REACT_APP_API_KEY);

重启开发服务后看控制台输出，排查变量是否正确加载

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