GitHub Actions在React应用程序持续集成的纱线构建步骤上停滞不前

Question

我正试图为我的React应用程序创建一个简单的连续集成工作流，在该工作流中，对于向master分支的每个新的pull请求，我都会运行单元测试并创建构建。我已经将GitHub Actions的yaml配置文件部署到了我的存储库中。当我创建一个pull请求时，它会启动对pull请求的检查，但它在构建步骤中被卡住了。我正在使用webpack来构建我的React应用程序。

集成.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在构建项目后不会停止，并且在监视模式下运行，因此它被卡住了，但我对此不确定。

Answer 1

这里的问题是使用webpack命令构建项目时，在构建完成后，它不会返回控件并继续运行。因此，它被困在yaml文件中的Build Project步骤上，而不会进入Github Actions中的下一步。解决方案是在webpack配置中添加一个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);
});
});
}
}
]