React应用部署时适配多SharePoint环境的配置方案咨询

1. 全局统一管理站点基础路径 #

通过React环境变量+全局配置文件实现路径的统一维护：

• 在项目根目录创建对应环境的.env文件：
  • .env.development：REACT_APP_SITE_BASE_PATH=/sites/someSite
  • .env.staging（对应验收acc环境）：REACT_APP_SITE_BASE_PATH=/sites/someSite
  • .env.production：REACT_APP_SITE_BASE_PATH=/sites/someSite
• 创建src/config/siteConfig.js导出路径：

export const siteBasePath = process.env.REACT_APP_SITE_BASE_PATH;

后续所有API请求直接导入siteBasePath即可，无需硬编码路径。

2. 无分支实现多环境字段映射适配 #

通过环境专属配置文件+打包时动态加载的方式，避免if-else分支：

步骤1：创建环境字段映射文件 #

在src/config/fieldMappings目录下分别创建三个环境的配置文件：

• dev.js（开发环境）：

export default {
  list1Fields: {
    field1: 'field1',
    field2: 'field2',
    field3: 'field3',
    field4: 'field4'
  }
};

• acc.js（验收环境）：

export default {
  list1Fields: {
    field1: 'col1',
    field2: 'field2',
    field3: 'col3',
    field4: 'field4'
  }
};

• prod.js（生产环境）：

export default {
  list1Fields: {
    field1: 'fieldCol1',
    field2: 'fieldCol2',
    field3: 'field3',
    field4: 'field4'
  }
};

步骤2：配置环境自动加载逻辑 #

创建src/config/fieldMappings/index.js，根据当前环境加载对应配置：

let fieldMappings;

switch (process.env.NODE_ENV) {
  case 'development':
    fieldMappings = require('./dev').default;
    break;
  case 'staging':
    fieldMappings = require('./acc').default;
    break;
  case 'production':
    fieldMappings = require('./prod').default;
    break;
  default:
    fieldMappings = require('./dev').default;
}

export default fieldMappings;

同时在package.json中添加对应环境的打包脚本（跨平台可借助cross-env包）：

"scripts": {
  "start": "react-scripts start",
  "build:acc": "cross-env NODE_ENV=staging react-scripts build",
  "build:prod": "react-scripts build"
}

步骤3：在API请求中使用映射字段 #

创建API请求工具src/services/sharepointApi.js，自动拼接对应环境的字段：

import { siteBasePath } from '../config/siteConfig';
import fieldMappings from '../config/fieldMappings';

export const getList1Items = async () => {
  const selectFields = Object.values(fieldMappings.list1Fields).join(',');
  const requestUrl = `${siteBasePath}/_api/web/lists/getbytitle('list1')/items?$select=${selectFields}`;

  const response = await fetch(requestUrl, {
    headers: {
      'Accept': 'application/json;odata=nometadata'
    }
  });

  return response.json();
};

打包对应环境时，会自动加载该环境的字段映射，生成符合要求的REST API请求URL。

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