webpack：未找到 - 將我的應用程序部署到 heroku 時

Question

我正在嘗試使用 github 將我的 node.js 應用程序部署到 heroku 但構建不斷被拒絕，給出錯誤“webpack：未找到”。不確定我在我的腳本中缺少什么。 1）我嘗試將節點版本添加到我的 package.json。 2）我確實安裝了 webpack 並將其包含在我的開發依賴項中。 3）我確實添加了“heroku-prebuild”：“npm install --dev”到我的腳本部分到package.json的根目錄，但仍然沒有運氣。 請參閱下面的構建日志：-

-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.17.0...
       Using default npm version: 8.15.0
       
-----> Installing dependencies
       Installing node modules
       
       > JATE@1.0.0 install
       > cd client && npm install
       
       
       added 2 packages, and audited 3 packages in 14s
       
       found 0 vulnerabilities
       
       added 162 packages, and audited 163 packages in 22s
       
       15 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
-----> Build
       Running build
       
       > JATE@1.0.0 build
       > cd client && npm run build
       
       
       > build
       > webpack --mode production
       
/tmp/build-3dc3f907.sh: 1: webpack: not found
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       Some possible problems:
       
       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

請參閱我的客戶文件夾的 package.json

{
  "name": "JATE",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --mode production",
    "start": "webpack --watch"
  },
  "author": "2U",
  "license": "UNLICENSED",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "http-server": "^0.11.1",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-pwa-manifest": "^4.3.0",
    "workbox-webpack-plugin": "^6.2.4"
  },
  "dependencies": {
    "code-mirror-themes": "^1.0.0",
    "idb": "^6.1.2"
  }
}

請參閱我的根文件夾的 package.json

{
  "name": "JATE",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start:dev": "concurrently \"cd server && npm run server\" \"cd client && npm run dev\"",
    "start": "npm run build && cd server && node server.js",
    "server": "cd server nodemon server.js --ignore client",
    "build": "cd client && npm run build",
    "install": "cd client && npm install",
    "client": "cd client && npm start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "if-env": "^1.0.4"
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "nodemon": "^2.0.4"
  }
}

Answer 1

您正在嘗試通過此腳本在主package.json中安裝客戶端依賴項：

"install": "cd client && npm install",

但是，默認情況下， Heroku 不運行npm install ：

Heroku 使用鎖文件， package-lock.json或yarn.lock來安裝預期的依賴關系樹，因此請務必將這些文件簽入 git 以確保跨環境的依賴關系版本相同。 如果您使用 npm，Heroku 將使用npm ci來設置構建環境。

因此，您的install腳本不會被調用。

您可以將 Heroku 配置為運行npm install代替（見下文），但在您這樣做之前，我建議您考慮影響。 npm ci存在於這種用例中：

此命令類似於npm install ，不同之處在於它旨在用於自動化環境，例如測試平台、持續集成和部署 - 或任何您希望確保干凈安裝依賴項的情況。 通過跳過某些面向用戶的功能，它可以比常規的 npm 安裝快得多。 它也比常規安裝更嚴格，可以幫助捕獲大多數 npm 用戶增量安裝的本地環境導致的錯誤或不一致。

簡而言之，使用npm install和npm ci的主要區別是：

• 該項目必須具有現有的package-lock.json或npm-shrinkwrap.json shrinkwrap.json 。
• If dependencies in the package lock do not match those in package.json , npm ci will exit with an error, instead of updating the package lock.
• npm ci一次只能安裝整個項目：無法使用此命令添加單個依賴項。
• 如果node_modules已經存在，它將在npm ci開始安裝之前自動刪除。
• 它永遠不會寫入package.json或任何包鎖：安裝基本上被凍結。

要繼續使用npm ci ，一種選擇是讓您的主build腳本在您的客戶端文件夾中調用npm ci ：

"build": "cd client && npm ci && npm run build",

如果您在閱讀完所有這些后仍想使用npm install ， 請將USE_NPM_INSTALL環境變量設置為true ：

heroku config:set USE_NPM_INSTALL=true

然后重新部署。