webentwicklung-frage-antwort-db.com.de

Wie erstelle ich eine App automatisch?

Ich benutze die Create-React-App seit einiger Zeit. 'npm start' oder 'yarn start' Autoreloads funktionieren von alleine, aber jetzt habe ich ein anderes Problem. Derzeit starte ich die App auf einem Express-Server über den Build-Ordner und verwende 'npm run build', da Express die erstellten Dateien bereitstellt. Es gibt viele API-Aufrufe, bei denen die App auf diese Weise ausgeführt werden muss. Jetzt wird es mühsam, jedes Mal 'npm run build' manuell auszuführen. Gibt es eine einfache Möglichkeit oder eine Möglichkeit, wie 'npm start' automatisch zu erstellen, ohne die App auszuwerfen (ich weiß, dass ich das Webpack dafür auswerfen und konfigurieren kann, aber ich möchte diesen Weg nicht beschreiten)? Vielen Dank

6
Sean sean

Leider müssen Sie dies selbst tun. Sie können ein Tool wie npm-watch verwenden, um das zu erreichen, was Sie möchten:

Installieren Sie npm-watch

npm i --save-dev npm-watch

package.json

{
  "name": "react-app",
  "version": "0.1.0",
  "private": false,
  "devDependencies": {
    "npm-watch": "^0.1.8",
    "react-scripts": "0.9.5",
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "watch": "npm-watch"
  },
  "watch": {
    "build": "src/"
  }
}

Verwenden Sie anschließend einfach npm run watch, um npm-watch zu starten, damit Ihre Assets bei Änderungen wiederhergestellt werden können. 

10
Brian

Während dies Ihre Frage nicht wirklich beantwortet, sollte Sie sollten npm run build nicht in der Entwicklung verwenden . Nicht nur die Wiederherstellungen sind langsam, sondern es werden auch wichtige React-Warnungen in Bezug auf Leistung und Größe übersprungen, sodass Sie sich am Ende mehr am Kopf kratzen und in den Warnungen weniger Details erhalten.

Wenn Sie nur API-Anforderungen mit Express ausführen müssen, verwenden Sie die Funktion proxy , mit der Sie API-Anforderungen von npm start an Ihren Server senden können. Es gibt auch ein Tutorial mit einem passenden Repository , das zeigt, wie das geht.

In der Produktion sollten Sie natürlich den Build verwenden, der von npm run build erstellt wurde. Sie müssen es jedoch nur vor der Bereitstellung ausführen.

7
Dan Abramov

ich verwende auch die App "reagieren". So habe ich meine Skripts geändert, um ein Projekt für die Entwicklung (Windows) auszuführen, den Produktions-Build zu erstellen und den Produktions-Build auszuführen.

"scripts": {
    "start": "set PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "deploy": "set PORT=8008 && serve -s build"
  }

npm start: Projekt für Entwicklung ausführen (Windows) npm-Run-Script-Build: Erstellen Sie den Produktions-Build . npm-Run-Script deploy: Führen Sie den Produktions-Build aus

  • npm install -g dient vor dem Ausführen von npm run-script deploy.
0
Viraj

Führen Sie Ihr Backend an einem anderen Port aus. Wenn Sie Express ausführen, ändern Sie die Datei bin/www 

var port = process.env.PORT || 9000

und erstellen Sie in Ihrem/src-Ordner eine Konfigurationsdatei, in der Sie Ihren api-Host, Routen, Parameter usw. konfigurieren

//config/index.js
export const Config = {
   protocol: 'http',
   Host: window.location.hostname, //or the environment variable
   params: '/api/',
   api: {post:'/posts/'}
}

und in Ihrer aufrufenden Komponente oder wo auch immer Sie die APIs anrufen

import {Config} from '../config'

axios.get(`${Config.protocol}${Config.Host}${Config.params}${Config.api.posts}${some id i guess}`)
0
KornholioBeavis