在 MERN 应用程序中运行服务器

如何解决在 MERN 应用程序中运行服务器

我正在学习 MERN 应用程序开发。我得到了一个不完整的 MERN 应用程序并试图运行该应用程序。我的 package.json 文件如下所示。

package.json

{
  "name": "machine-shop","version": "1.0.0","private": true,"type": "module","scripts": {
    "build": "node ace build --production","start": "node server.js","dev": "node ace serve --watch","lint": "eslint . --ext=.ts","format": "prettier --write ."
  },"devDependencies": {
    "@adonisjs/assembler": "^5.0.0","@babel/core": "^7.14.3","@babel/preset-react": "^7.13.13","@symfony/webpack-encore": "^1.4.0","@types/node": "^16.3.3","adonis-preset-ts": "^2.1.0","autoprefixer": "^10.2.6","eslint": "^7.27.0","eslint-config-prettier": "^8.3.0","eslint-plugin-adonis": "^1.3.1","eslint-plugin-prettier": "^3.4.0","node-pre-gyp": "^0.17.0","pino-pretty": "^5.0.1","postcss": "^8.3.0","postcss-loader": "^5.3.0","prettier": "^2.3.0","sass": "^1.34.0","sass-loader": "^11.1.1","tailwindcss": "^2.1.2","typescript": "~4.2","youch": "^2.2.2","youch-terminal": "^1.1.1"
  },"dependencies": {
    "-": "^0.0.1","@adonisjs/auth": "^8.0.4","@adonisjs/core": "^5.1.0","@adonisjs/lucid": "^14.1.0","@adonisjs/repl": "^3.0.0","@adonisjs/session": "^6.0.0","@adonisjs/shield": "^7.0.0","@adonisjs/view": "^6.0.0","@ckeditor/ckeditor5-build-decoupled-document": "^28.0.0","@ckeditor/ckeditor5-react": "^3.0.2","@date-io/date-fns": "2.6.1","@formatjs/intl-pluralrules": "1.3.5","@fortawesome/fontawesome-free": "5.13.0","@manaflair/redux-batch": "1.0.0","@material-ui/core": "4.9.14","@material-ui/icons": "4.9.1","@material-ui/lab": "4.0.0-alpha.53","@material-ui/pickers": "3.2.10","@material-ui/styles": "4.9.14","@reduxjs/toolkit": "^1.6.1","@tanem/svg-injector": "8.0.50","apexcharts": "^3.27.2","axios": "^0.21.1","axios-mock-adapter": "1.18.1","bootstrap": "4.6.0","camelcase": "^5.2.0","clipboard-copy": "3.1.0","clsx": "1.1.0","cp-cli": "2.0.0","css-mediaquery": "^0.1.2","date-fns": "2.8.1","dotenv": "^10.0.0","dotenv-expand": "5.1.0","downshift": "3.4.2","fg-loadcss": "^3.1.0","force": "^0.0.3","formik": "2.1.4","holderjs": "^2.9.9","json2mq": "^0.2.0","luxon": "^1.27.0","material-ui-popup-state": "^1.8.3","MysqL": "^2.18.1","object-path": "^0.11.5","phc-argon2": "^1.1.1","phc-bcrypt": "^1.0.7","prop-types": "^15.7.2","proxy-addr": "^2.0.7","react": "^17.0.2","react-app-polyfill": "^1.0.4","react-bootstrap": "1.0.1","react-bootstrap-table-next": "4.0.2","react-bootstrap-table2-paginator": "2.1.2","react-datepicker": "2.16.0","react-dev-utils": "^9.1.0","react-dom": "^17.0.2","react-draggable": "4.4.2","react-dropzone": "^11.3.4","react-inlinesvg": "1.2.0","react-intl": "3.6.2","react-is": "16.13.1","react-perfect-scrollbar": "1.5.8","react-portal": "4.2.0","react-redux": "7.1.3","react-router-dom": "^5.2.0","react-select": "3.1.0","react-slick": "^0.28.1","react-swipeable-views": "0.13.9","react-Syntax-Highlighter": "12.2.1","react-tinder-card": "^1.4.0","react-window": "1.8.5","redux": "4.0.5","redux-persist": "6.0.0","redux-saga": "1.1.3","reflect-Metadata": "^0.1.13","socicon": "3.0.5","source-map-support": "^0.5.19","sweetalert2": "^11.0.11","yup": "^0.32.9"
  }
}

我的 server.js 文件如下

server.js

import 'reflect-Metadata';
import sourceMapSupport from 'source-map-support';
import { Ignitor } from '@adonisjs/core/build/standalone';

sourceMapSupport.install({ handleUncaughtExceptions: false })

new Ignitor(__dirname).httpServer().start()

我正在尝试使用 npm start 命令运行应用程序。但我遇到了以下错误。

file:///home/foysal/Music/machineshop/server.js:20
new Ignitor(__dirname).httpServer().start()
            ^

ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/foysal/Music/machineshop/package.json' contains "type": "module". To treat it as a Commonjs script,rename it to use the '.cjs' file extension.
    at file:///home/foysal/Music/machineshop/server.js:20:13

这段代码 new Ignitor(__dirname).httpServer().start() 是什么意思？代码正确吗？

以前我在另一个 MERN 应用程序中工作过。该项目的 server.js 文件与该项目的 server.js 文件不相似。

我做错了什么吗？

谁能帮我运行应用程序？

解决方法

您混淆了客户端和服务器。通常，当您处理这样的堆栈时，会将它们分开 - 在单独的存储库中或至少在单独的目录中。正如我所见，您有两种方式：

单独的客户端和服务器依赖项
使用 Adonis 为 React 应用提供服务

为了更好的可维护性，我会选择第一种方法。如果这看起来太复杂，您可以暂时采用后一个，然后继续努力分离。为此，您可能需要查看 this 文档。