Facebook bietet einen create-react-app
Befehl zum Erstellen von Reaktions-Apps. Wenn wir ausführen npm run build
, sehen wir die Ausgabe im /build
Ordner.
npm run build
Erstellt die App für die Produktion im Build-Ordner. Es bündelt React im Produktionsmodus korrekt und optimiert den Build für die beste Leistung.
Der Build wird minimiert und die Dateinamen enthalten die Hashes. Ihre App kann jetzt bereitgestellt werden!
Wie können wir einen benutzerdefinierten Ordner anstelle /build
für die Ausgabe verwenden? Vielen Dank.
Antworten:
Sie können den Namen des Build-Ausgabeordners mit den aktuellen Konfigurationsoptionen nicht ändern.
Außerdem solltest du nicht. Dies ist ein Teil der Philosophie dahinter
create-react-app
: Sie sagen Konvention über Konfiguration .Wenn Sie Ihren Ordner wirklich umbenennen müssen, werden zwei Optionen angezeigt:
Schreiben Sie direkt nach Abschluss des Erstellungsprozesses einen Befehl, der den Inhalt des Erstellungsordners in einen anderen gewünschten Ordner kopiert . Sie können beispielsweise das
copyfiles
npm-Paket oder ähnliches ausprobieren .Sie könnten versuchen, die Create-React-App auszuwerfen und die Konfiguration zu optimieren.
Es ist jedoch wichtig zu beachten, dass dies eine Einwegoperation ist. Sobald Sie ausgeworfen haben, können Sie nicht mehr zurück ! Sie verlieren alle zukünftigen Updates.
Daher würde ich Ihnen empfehlen, wenn möglich keine benutzerdefinierten Ordnernamen zu verwenden . Versuchen Sie, die Standardbenennung beizubehalten. Wenn dies nicht möglich ist, versuchen Sie es mit # 1. Wenn es für Ihren speziellen Anwendungsfall immer noch nicht funktioniert und Sie wirklich keine Optionen mehr haben, erkunden Sie Nummer 2. Viel Glück!
quelle
react-create-app
Befehle den/build
Ordner für die Eingabe verwendet. (Beispiel: während des Bereitstellungsprozesses). Kopieren ist also die sicherste Option, die ich sehe. PS: Wenn es keine Pläne gibt, den Standardordner/build
für die Eingabe zu verwenden, stimme ich Ihnen zu - nur das Umbenennen reicht aus.Bearbeiten Sie Ihre package.json:
"build": "react-scripts build && mv build webapp"
quelle
"build": "react-scripts build && rm -rf docs && mv build docs"
anders machen, nachdem es nach dem ersten Start den Build in den docs-Ordner verschoben hat, anstatt ihn zu überschreiben.rm -rf webapp = DEL /S /Q webapp
undmv build webapp = move build webapp
mv build webapp = xcopy /E /H /C /I build webapp
"build": "react-scripts build && RMDIR /S /Q webapp && move build webapp"
npm i --save-dev cross-env
. Und dann in Ihrem package.json:"build": "cross-env react-scripts build && mv build webapp"
Create-React-App Version 2+ Antwort
Fügen Sie für neuere (> v2) Versionen von create-react-app (und möglicherweise auch für ältere Versionen) die folgende Zeile zu package.json hinzu und erstellen Sie sie neu.
"homepage": "./"
Sie sollten jetzt sehen, dass die Datei build / index.html relative Links
./static/...
anstelle von Links zum Server-Stammverzeichnis enthält :/static/...
.quelle
Félix 'Antwort ist richtig und positiv, unterstützt von Dan Abramov selbst .
Für diejenigen, die die Struktur der Ausgabe selbst (innerhalb des
build
Ordners) ändern möchten , können mit Hilfe von Befehle Befehlepostbuild
nach dem Erstellen ausgeführt werden , die automatisch nach dembuild
in derpackage.json
Datei definierten Skript ausgeführt werden.Das folgende Beispiel ändert es von
static/
inuser/static/
, verschiebt Dateien und aktualisiert Dateireferenzen für relevante Dateien ( vollständige Zusammenfassung hier ):package.json
{ "name": "your-project", "version": "0.0.1", [...] "scripts": { "build": "react-scripts build", "postbuild": "./postbuild.sh", [...] }, }
postbuild.sh
#!/bin/bash # The purpose of this script is to do things with files generated by # 'create-react-app' after 'build' is run. # 1. Move files to a new directory called 'user' # The resulting structure is 'build/user/static/<etc>' # 2. Update reference on generated files from # static/<etc> # to # user/static/<etc> # # More details on: https://github.com/facebook/create-react-app/issues/3824 # Browse into './build/' directory cd build # Create './user/' directory echo '1/4 Create "user" directory' mkdir user # Find all files, excluding (through 'grep'): # - '.', # - the newly created directory './user/' # - all content for the directory'./static/' # Move all matches to the directory './user/' echo '2/4 Move relevant files' find . | grep -Ev '^.$|^.\/user$|^.\/static\/.+' | xargs -I{} mv -v {} user # Browse into './user/' directory cd user # Find all files within the folder (not subfolders) # Replace string 'static/' with 'user/static/' on all files that match the 'find' # ('sed' requires one to create backup files on OSX, so we do that) echo '3/4 Replace file references' find . -type f -maxdepth 1 | LC_ALL=C xargs -I{} sed -i.backup -e 's,static/,user/static/,g' {} # Delete '*.backup' files created in the last process echo '4/4 Clean up' find . -name '*.backup' -type f -delete # Done
quelle
build
und es dann verschieben / umbenennen musst .Wenn Sie drei Jahre nach der ersten Veröffentlichung zu dieser Frage gekommen sind, weil dies für Sie immer noch ein Problem darstellt, sollten Sie diesen Vorschlag unterstützen, um eine neue
BUILD_PATH
Umgebungsvariable zu unterstützen .https://github.com/facebook/create-react-app/pull/8986
Aus der Dokumentation des Vorschlags:
Wenn dieser Vorschlag angenommen wird, bedeutet dies, dass das Anpassen des Ausgabeziels für die Create-React-App so einfach wie das Aktualisieren der Aktualisierung Ihres Build-Skripts wird:
// package.json "scripts": { "build": "BUILD_PATH='./dist' react-scripts build", // ... },
oder fügen Sie eine .env-Datei zum Stammverzeichnis Ihres Projekts hinzu:
# .env BUILD_PATH='./dist'
quelle
Basierend auf den Antworten von Ben Carp und Wallace Sidhrée :
Dies ist, was ich verwende, um meinen gesamten Build-Ordner in meinen öffentlichen Wamp-Ordner zu kopieren.
package.json
{ "name": "[your project name]", "homepage": "http://localhost/[your project name]/", "version": "0.0.1", [...] "scripts": { "build": "react-scripts build", "postbuild": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./post_build.ps1", [...] }, }
post_build.ps1
Copy-Item "./build/*" -Destination "C:/wamp64/www/[your project name]" -Recurse -force
Die Homepage-Zeile wird nur benötigt, wenn Sie sie in einem Unterordner auf Ihrem Server bereitstellen (siehe Diese Antwort aus einer anderen Frage).
quelle
Ich hatte das Szenario, den Ordner umbenennen und den Speicherort der Build-Ausgabe ändern zu wollen, und verwendete den folgenden Code in der package.json mit der neuesten Version
"build": "react-scripts build && mv build ../my_bundles"
quelle
build
innerhalb einesdocs
für das Hosting mit Github Seiten dir, endete mit dem Gehen,"build-docs": "react-scripts build && cp -r build/** docs"
Schnelles Kompatibilitätsskript (funktioniert auch unter Windows):
"build": "react-scripts build && rm -rf docs && mv build docs"
quelle
Windows Powershell-Skript
//package.json "scripts": { "postbuildNamingScript": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./powerShellPostBuildScript.ps1", // powerShellPostBuildScript.ps1 move build/static/js build/new-folder-name (Get-Content build/index.html).replace('static/js', 'new-folder-name') | Set-Content build/index.html "Finished Running BuildScript"
Laufen
npm run postbuildNamingScript
in Powershell wird die JS - Dateien verschiebenbuild/new-folder-name
und zeigt auf den neuen Standort ausindex.html
.quelle
Öffnen Sie die Eingabeaufforderung in der Quelle Ihrer Anwendung. Führen Sie den Befehl aus
Öffnen Sie Ihre Datei scripts / build.js und fügen Sie diese am Anfang der Datei nach der Zeile 'use strict' hinzu
'use strict'; .... process.env.PUBLIC_URL = './' // Provide the current path .....
Öffnen Sie Ihre config / paths.js und ändern Sie die buildApp-Eigenschaft im Exportobjekt in Ihren Zielordner . (Hier gebe ich 'react-app-scss' als Zielordner an. )
module.exports = { ..... appBuild: resolveApp('build/react-app-scss'), ..... }
Lauf
Hinweis: Das Ausführen plattformabhängiger Skripts ist nicht ratsam
quelle
Für alle, die noch nach einer Antwort suchen, die sowohl unter Linux als auch unter Windows funktioniert:
Fügen Sie dies dem
scripts
Abschnitt in hinzupackage.json
"build": "react-scripts build && mv build ../docs || move build ../docs",
Mit
../docs
ist der relative Ordner, in den Sie den Build-Ordner verschieben möchtenquelle
Sie können die Konfiguration mit einem kleinen Hack in Ihrem Stammverzeichnis aktualisieren:
Ersetzen Sie - Ihr Verzeichnis Ihrer Wahl - durch das Ordnerverzeichnis, auf dem es aufbauen soll
Beachten Sie, dass der von mir angegebene Pfad etwas schmutzig sein kann, aber dies ist alles, was Sie tun müssen, um die Konfiguration zu ändern.
quelle
Webpack =>
umbenannt in build to dist
output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), },
quelle