GitHub 操作卡在 yarn build step for React app continuous integration

Question

我正在尝试为我的 React 应用程序创建一个简单的持续集成工作流程，其中对于主分支的每个新拉取请求，我运行单元测试并创建构建。我已将 GitHub 操作的 yaml 配置文件部署到我的存储库。当我创建拉取请求时，它会开始检查拉取请求，但它会卡在构建步骤中。我正在使用 webpack 构建我的 React 应用程序。

integrate.yml

name: Continous Integration

on:
  pull_request:
    branches: [master]

jobs:
  test_pull_request:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Install Node.js
        uses: actions/setup-node@v2
          with:
            node-version: '12'

      - name: Cache Dependencies
        uses: actions/cache@v2
          with:
            path: '**/node_modules'
            key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
  
      - name: Install Dependencies
        run: yarn install

      - name: Run Unit Tests
        run: yarn test

      - name: Build Project
        run: yarn build:prod

npm 脚本

"scripts": {
    "start": "webpack-dev-server --env development --open --color --progress",
    "build:prod": "webpack --env production --color --progress",
    "build:dev": "webpack --env development --color --progress",
    "test": "jest",
    "test:watch": "jest --watch",
    "precommit": "lint-staged"
},

我假设 webpack 在构建项目后不会停止，并且运行ning 处于监视模式，因此它被卡住了，但我不确定这一点。

Answer 1

这里的问题是在使用webpack命令构建项目时，构建完成后，它没有returns控制并保持在运行。因此它卡在 yaml 文件中的 Build Project 步骤并且不会进入 Github 操作中的下一步。解决方法是在webpack config中添加一个compiler hook，用于构建完成后退出。这就是我在我的配置中添加它的方式，现在它工作正常。

plugins: [
  // Added this to plugins in webpack config
  {
     apply: (compiler) => {
       compiler.hooks.done.tap('DonePlugin', (stats) => {
         console.log('Compile is done !');
         setTimeout(() => {
           process.exit(0);
         });
       });
     }
  }
]

GitHub 操作卡在 yarn build step for React app continuous integration

GitHub Actions stuck on yarn build step for React app continous integration

continuous-integration

reactjs

webpack

yarnpkg

github-actions