Verwenden Sie einen benutzerdefinierten Build-Ausgabeordner, wenn Sie die create-react-app verwenden

74

Facebook bietet einen create-react-app Befehl zum Erstellen von Reaktions-Apps. Wenn wir ausführen npm run build, sehen wir die Ausgabe im /buildOrdner.

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 /buildfür die Ausgabe verwenden? Vielen Dank.

6324
quelle
Sehen Sie sich diese Frage an und versuchen Sie, "Build" in "Was auch immer" zu ändern. Habe es nicht versucht.
Nikrb

Antworten:

40

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 dahintercreate-react-app : Sie sagen Konvention über Konfiguration .

Wenn Sie Ihren Ordner wirklich umbenennen müssen, werden zwei Optionen angezeigt:

  1. 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 copyfilesnpm-Paket oder ähnliches ausprobieren .

  2. Sie könnten versuchen, die Create-React-App auszuwerfen und die Konfiguration zu optimieren.

    Wenn Sie mit dem Build-Tool und den Konfigurationsoptionen nicht zufrieden sind, können Sie jederzeit auswerfen. Dieser Befehl entfernt die einzelne Build-Abhängigkeit aus Ihrem Projekt.

    Stattdessen werden alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, sodass Sie die volle Kontrolle über sie haben. Alle Befehle außer eject funktionieren weiterhin, zeigen jedoch auf die kopierten Skripte, damit Sie sie optimieren können. An diesem Punkt bist du alleine.

    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!

Kaloyan Kosev
quelle
2
Welchen Vorteil hätte das Kopieren der Dateien gegenüber dem Umbenennen des Ordners?
Azium
Mein Hauptanliegen war, dass es Probleme verursachen könnte, wenn einer der anderen react-create-appBefehle den /buildOrdner 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 /buildfür die Eingabe zu verwenden, stimme ich Ihnen zu - nur das Umbenennen reicht aus.
Kaloyan Kosev
Auch für mich. Ich möchte, dass mein Build-Ordner an einen anderen Ort verschoben wird, damit ich ein Docker-Image erstellen kann, ohne dass alle anderen Cruft im Root-Ordner aus dem Docker-Kontext ausgeschlossen werden müssen.
Ray Booysen
Das Problem mit Konventionen über Konfigurationen besteht darin, dass Sie mehrere kollidierende Konventionen haben. IE verwenden wir reagieren innerhalb einer Winkelanwendung. Daher sollte nur der endgültige Build in den Build gehen und reagieren, um nur Zwischendateien zu erstellen.
paul23
88

Bearbeiten Sie Ihre package.json:

"build": "react-scripts build && mv build webapp"
Félix
quelle
24
Ich musste es "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.
TimoSolo
Die Befehle entsprechen Windows rm -rf webapp = DEL /S /Q webapp undmv build webapp = move build webapp
Taha Farooqui
1
Wenn Sie den Build-Ordner nicht verschieben möchten, kopieren Sie einfach seine Dateien. Befehle gleichwertig für Windows:mv build webapp = xcopy /E /H /C /I build webapp
Taha Farooqui
Wenn Sie Dinge in Webapp und nicht in Webapp / Build verschieben möchten, lauten die Befehle für Windows"build": "react-scripts build && RMDIR /S /Q webapp && move build webapp"
Sergio Gutiérrez
Installieren Sie zunächst ein npm-Paket namens cross-env using, damit es plattformübergreifend (einschließlich Windows) ausgeführt werden kann npm i --save-dev cross-env. Und dann in Ihrem package.json:"build": "cross-env react-scripts build && mv build webapp"
Nikhil Sinha
49

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/....

Malcolm Dwyer
quelle
4
Vielen Dank. Dies sollte die akzeptierte Antwort sein. VS Code warnt Sie, wenn Sie keine absolute URL verwenden, der Build jedoch auch mit relativen URLs funktioniert.
Hari
Genau das habe ich gesucht. Danke
Jesus
14

Félix 'Antwort ist richtig und positiv, unterstützt von Dan Abramov selbst .

Für diejenigen, die die Struktur der Ausgabe selbst (innerhalb des buildOrdners) ändern möchten , können mit Hilfe von Befehle Befehle postbuildnach dem Erstellen ausgeführt werden , die automatisch nach dem buildin der package.jsonDatei definierten Skript ausgeführt werden.

Das folgende Beispiel ändert es von static/in user/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
Wallace Sidhrée
quelle
"postbuild": "postbuild.sh" (ohne ./) hat bei mir funktioniert, zumindest unter Windows
x7BiT
Schade, dass du mit Füßen treten buildund es dann verschieben / umbenennen musst .
Greg K
7

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_PATHUmgebungsvariable zu unterstützen .

https://github.com/facebook/create-react-app/pull/8986

Aus der Dokumentation des Vorschlags:

Standardmäßig gibt Create React App kompilierte Assets in ein /buildangrenzendes Verzeichnis aus /src. Mit dieser Variablen können Sie einen neuen Pfad für Create React App zur Ausgabe von Assets angeben. BUILD_PATHsollte als Pfad relativ zum Stammverzeichnis Ihres Projekts angegeben werden.

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'
Andrew H.
quelle
Ich hoffe es kommt rein! Das ist super ärgerlich, dass sie sich weigern, es zu unterstützen.
Will Farley
5

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).

gcoulby
quelle
5

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"
Jaison
quelle
Dies ist sehr nützlich, wenn Sie den Inhalt eines Kopier buildinnerhalb eines docsfür das Hosting mit Github Seiten dir, endete mit dem Gehen, "build-docs": "react-scripts build && cp -r build/** docs"
iPatch
2

Schnelles Kompatibilitätsskript (funktioniert auch unter Windows):

"build": "react-scripts build && rm -rf docs && mv build docs"
Sagar Ghimire
quelle
2

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 postbuildNamingScriptin Powershell wird die JS - Dateien verschieben build/new-folder-nameund zeigt auf den neuen Standort aus index.html.

Ben Carp
quelle
1

Öffnen Sie die Eingabeaufforderung in der Quelle Ihrer Anwendung. Führen Sie den Befehl aus

npm run eject

Ö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
.....

Geben Sie hier die Bildbeschreibung ein

Ö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'),
.....
}

Geben Sie hier die Bildbeschreibung ein

Lauf

npm run build

Hinweis: Das Ausführen plattformabhängiger Skripts ist nicht ratsam

Vignesh M.
quelle
0

Für alle, die noch nach einer Antwort suchen, die sowohl unter Linux als auch unter Windows funktioniert:

Fügen Sie dies dem scriptsAbschnitt in hinzupackage.json

"build": "react-scripts build && mv build ../docs || move build ../docs",

Mit ../docsist der relative Ordner, in den Sie den Build-Ordner verschieben möchten

Tuan Tran
quelle
-1

Sie können die Konfiguration mit einem kleinen Hack in Ihrem Stammverzeichnis aktualisieren:

  1. npm run eject
  2. config / webpack.config.prod.js - Zeile 61 - Ändern Sie den Pfad in: __dirname + './../--Ihr Verzeichnis Ihrer Wahl--'
  3. config / paths.js - Zeile 68 - Update auf ResolutionApp ('./-- Ihr Verzeichnis Ihrer Wahl--')

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.

Jerry Lin
quelle
-1

Webpack =>

umbenannt in build to dist

output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
Anupam Maurya
quelle