编写 ES6 代码时如何使用 Babel 将 Node.js / React 应用程序部署到 Heroku？答案

【问题标题】：How to deploy Node.js / React application to Heroku using Babel when writing ES6 code?编写 ES6 代码时如何使用 Babel 将 Node.js / React 应用程序部署到 Heroku？
【发布时间】：2020-01-21 09:40:45
【问题描述】：

我有一个使用 React 和 Node.js 的应用程序。我正在努力将其部署到 Heroku，因为我需要使用 Babel 来转译代码。有人可以帮助设置我需要运行的脚本吗？

我目前正在努力了解如何正确运行客户端和服务器，因为我收到有关模块位置的错误：

Error: Cannot find module '/app/build/index.js'

这是我的 package.json

{
  "main": "server.js",
  "scripts": {
    "server": "nodemon server/server.js --ignore './client/' --exec babel-node -e js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",

    "clean": "rm -rf build && mkdir build",
    "build-babel": "babel -d ./build ./server/server.js -s",
    "build": "npm run clean && npm run build-babel",
    "start": "npm run build && node ./build/index.js",
    "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "concurrently": "^4.1.0",
    "express": "^4.16.4",
    "google-play-scraper": "^6.2.8",
    "googleapis": "^39.2.0",
    "is-empty": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.4.19",
    "mongoose-paginate-v2": "^1.0.24",
    "multer": "^1.4.1",
    "node-fetch": "^2.3.0",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "validator": "^10.11.0",
    "winston": "^3.2.1",
    "xml2js": "^0.4.19",
    "@babel/core": "^7.3.4",
    "@babel/node": "^7.2.2",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.17.2",
    "nodemon": "^1.18.10"
  }
}

以及重要文件的文件结构：

node_modules
.babelrc
babel.config.js
package-lock.json
package.json

client
--package-lock.json
--package.json
node_modules
--src
----index.js

server
--server.js

我认为我设置的脚本不正确。

【问题讨论】：

你有想过这个吗？

标签： node.js reactjs heroku babeljs

【解决方案1】：

我的问题出在一些脚本上。这是最终的 package.json 让它一切正常。

{
  "main": "server.js",
  "scripts": {
    "server": "nodemon server/server.js --ignore './client/' --exec babel-node -e js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "start": "npm run build && node ./build/server.js",
    "build": "npm run clean && npm run build-babel",
    "clean": "rm -rf ./build && mkdir ./build",
    "build-babel": "babel -d ./build ./server -s",
    "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
  },
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/node": "^7.2.2",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "concurrently": "^4.1.0",
    "express": "^4.16.4",
    "google-play-scraper": "^7.0.2",
    "googleapis": "^39.2.0",
    "is-empty": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.4.19",
    "mongoose-paginate-v2": "^1.0.24",
    "multer": "^1.4.1",
    "node-fetch": "^2.3.0",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "validator": "^10.11.0",
    "winston": "^3.2.1",
    "xml2js": "^0.4.19"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.17.2",
    "nodemon": "^1.18.10"
  }
}

【讨论】：