React开发的SPO WebPart如何配置环境变量？

针对SPO React WebPart的环境变量配置，以下是几个经过验证的可行方案：

方案一：.env文件+自定义Webpack配置（推荐本地开发+CI/CD场景） #

1. 创建环境配置文件
   在项目根目录创建对应环境的.env文件：

   • .env.ist：REACT_APP_API_URL=https://ist-api.example.com
   • .env.uat：REACT_APP_API_URL=https://uat-api.example.com

2. 安装依赖
   执行命令安装所需工具：

   npm install dotenv-webpack cross-env --save-dev
   

3. 修改gulpfile.js配置Webpack
   在文件顶部引入依赖，然后添加自定义Webpack配置逻辑：

   const dotenv = require('dotenv-webpack');
   const buildEnv = process.env.BUILD_ENV || 'local';
   
   // 在原有的webpack配置中添加插件
   build.configureWebpack.mergeConfig({
     additionalConfiguration: (generatedConfiguration) => {
       generatedConfiguration.plugins.push(
         new dotenv({
           path: `.env.${buildEnv}`
         })
       );
       return generatedConfiguration;
     }
   });
   

4. 配置打包脚本
   在package.json的scripts中添加环境打包命令：

   "scripts": {
     "build:ist": "cross-env BUILD_ENV=ist gulp bundle --ship && gulp package-solution --ship",
     "build:uat": "cross-env BUILD_ENV=uat gulp bundle --ship && gulp package-solution --ship"
   }
   

5. 在React组件中使用变量
   直接通过process.env.REACT_APP_API_URL调用对应环境的API地址：

   const apiUrl = process.env.REACT_APP_API_URL;
   // 后续API请求逻辑
   

方案二：SPFx原生配置文件（无额外依赖，适合纯SPO部署） #

1. 创建环境配置文件
   在项目config目录下创建环境专属配置文件：

   • config.ist.json：

     {
       "apiUrl": "https://ist-api.example.com"
     }
     

   • config.uat.json：

     {
       "apiUrl": "https://uat-api.example.com"
     }
     

2. 添加gulp复制任务
   在gulpfile.js中添加任务，根据环境复制对应配置文件到输出目录：

   const buildEnv = process.env.BUILD_ENV || 'local';
   
   gulp.task('copy-config', (done) => {
     gulp.src(`./config/config.${buildEnv}.json`)
       .pipe(gulp.dest('./dist/config'))
       .on('end', done);
   });
   
   // 将copy-config任务绑定到bundle任务之前
   build.task('bundle', gulp.series('copy-config', build.tasks.bundle));
   

3. 在WebPart中加载配置
   在WebPart的onInit方法中加载配置，并传递给React组件：

   protected async onInit(): Promise<void> {
     const configResponse = await fetch(`${this.context.pageContext.web.absoluteUrl}/SiteAssets/your-webpart-name/dist/config/config.json`);
     this.apiConfig = await configResponse.json();
     return super.onInit();
   }
   
   protected render(): void {
     const element: React.ReactElement<IYourWebPartProps> = React.createElement(
       YourWebPartComponent,
       {
         apiUrl: this.apiConfig.apiUrl
       }
     );
     ReactDom.render(element, this.domElement);
   }
   

方案三：CI/CD管道变量替换（适合自动化部署场景） #

1. 代码中定义占位符
   在React组件或配置文件中使用占位符：

   const API_URL = "__API_URL__";
   

2. CI/CD中替换占位符
   在Azure DevOps、GitHub Actions等CI/CD管道中，根据部署环境执行替换命令：

   • Linux/macOS（sed命令）：

     sed -i 's/__API_URL__/https://ist-api.example.com/g' ./dist/your-webpart-bundle.js
     

   • Windows（PowerShell命令）：

     (Get-Content ./dist/your-webpart-bundle.js) -replace '__API_URL__', 'https://ist-api.example.com' | Set-Content ./dist/your-webpart-bundle.js
     

3. 执行打包部署
   替换完成后，继续执行SPFx的bundle和package-solution命令完成部署。

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