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

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.

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!

Bearbeiten Sie Ihre package.json:

"build": "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/....

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

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'

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

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"

Schnelles Kompatibilitätsskript (funktioniert auch unter Windows):

"build": "react-scripts build && rm -rf docs && mv build docs"

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.

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

Ö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

npm run build

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

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

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.

Webpack =>

umbenannt in build to dist

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