React+Yo Office开发的Outlook Web Add-in在GitHub Action中构建文件夹缺失

1. 确认webpack构建输出目录是否匹配 #

首先检查项目根目录下的webpack.config.js，查看output.path字段指定的构建输出目录：

// webpack.config.js示例
const path = require('path');

module.exports = {
  // 其他配置项...
  output: {
    path: path.resolve(__dirname, 'build'), // 注意这里的目录名称
    filename: '[name].bundle.js'
  }
};

Yo Office生成的React项目默认输出目录可能不是dist，如果配置里是build或其他名称，需要将GitHub Action中的SOURCE_DIR修改为对应目录。

2. 验证构建步骤是否成功生成目录 #

在GitHub Action的构建步骤后添加目录查看命令，确认构建是否成功生成目标文件夹：

steps:
  - uses: actions/checkout@v1
  - run: npm install
  - run: npm run build
  - run: ls -la # 查看当前目录结构，确认是否存在构建输出目录
  - uses: jakejarvis/s3-sync-action@master
    with:
      args: --acl public-read --follow-symlinks --delete
    env:
      AWS_S3_BUCKET: 'shyam-pre-dev'
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_REGION: 'eu-west-1'
      SOURCE_DIR: 'dist' # 替换为实际输出目录

查看Action执行日志中ls -la的输出，即可确认是否生成了目标文件夹。

3. 升级Node.js版本至兼容的LTS版本 #

你当前使用的Node.js 15.x已停止维护，可能与webpack、Yo Office工具存在兼容性问题，导致构建失败。建议更换为LTS版本（如18.x或20.x）：

strategy:
  matrix:
    node-version: [18.x] # 使用LTS版本

4. 优化依赖安装步骤确保完整性 #

将npm install替换为npm ci，并添加Node环境配置动作，确保依赖安装稳定且完整：

steps:
  - uses: actions/checkout@v1
  - uses: actions/setup-node@v4
    with:
      node-version: ${{ matrix.node-version }}
      cache: 'npm' # 启用缓存加速安装
  - run: npm ci # 严格按package-lock.json安装依赖
  - run: npm run build
  - run: ls -la
  # 后续S3同步步骤...

排查顺序建议 #

1. 先确认webpack输出目录与Action中SOURCE_DIR是否一致
2. 查看构建日志确认npm run build是否执行成功
3. 升级Node.js至LTS版本
4. 改用npm ci优化依赖安装流程

内容的提问来源于stack exchange，提问作者Shyam sundar shah