GitHub Actions 停留在用于 React 应用程序持续集成的纱线构建步骤

如何解决GitHub Actions 停留在用于 React 应用程序持续集成的纱线构建步骤

我正在尝试为我的 React 应用程序创建一个简单的持续集成工作流，其中对于每个到 master 分支的新拉取请求，我都会运行单元测试并创建构建。我已将 GitHub Actions 的 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 在构建项目后不会停止，并且由于它被卡住而在监视模式下运行，但我不确定这一点。

解决方法

这里的问题是使用 webpack 命令构建项目时，构建完成后，它不返回控制权并继续运行。因此它会卡在 Build Project 文件中的 yaml 步骤，并且不会进入 Github Actions 中的下一步。解决办法是在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);
         });
       });
     }
  }
]