wake-up-neo.com

Verwenden Sie einen benutzerdefinierten Build-Ausgabeordner, wenn Sie die Create-React-App verwenden

Facebook bietet einen create-react-appBefehl , um Reaction-Apps zu erstellen. Wenn wir npm run build ausführen, sehen wir die Ausgabe im /build-Ordner. 

npm run build

Erzeugt die App für die Produktion im Erstellungsordner. Es richtig Bundles Reagiert im Produktionsmodus und optimiert den Build für das Beste Performance.

Der Build wird minimiert und die Dateinamen enthalten die Hashes. Ihre App ist bereit zum Einsatz!

Wie können wir anstelle von /build einen benutzerdefinierten Ordner für die Ausgabe verwenden? Vielen Dank.

25
6324

Sie können den Namen des Build-Ausgabeordners nicht mit den aktuellen Konfigurationsoptionen ändern.

Außerdem solltest du nicht. Dies ist ein Teil von der Philosophie hinter react-create-app : Sie sagen Convention over Configuration.

Wenn Sie Ihren Ordner wirklich umbenennen müssen, sehe ich zwei Optionen:

  1. Direkt nach Abschluss des Erstellungsvorgangs wird mit write ein Befehl erstellt, der den Inhalt des Erstellungsordners in einen anderen Ordner kopiert, den Sie benötigen. Zum Beispiel können Sie das copyfiles npm-Paket oder etwas Ähnliches ausprobieren.

  2. Sie könnten versuchen reagieren-create-app auswerfen und die Konfiguration anpassen.

    Wenn Sie mit dem Build-Tool und den Konfigurationsoptionen nicht zufrieden sind, können Sie es 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 vollständige Kontrolle über sie haben. Alle Befehle außer Eject funktionieren weiterhin, aber sie zeigen auf die kopierten Skripts, damit Sie sie anpassen können. An diesem Punkt bist du alleine.

    Es ist jedoch wichtig zu beachten, dass dies eine Einwegoperation ist. Nach dem Auswerfen können Sie nicht mehr zurückgehen! Sie verlieren alle zukünftigen Updates.

Daher würde Ihnen empfehlen, nach Möglichkeit keine benutzerdefinierten Ordnernamen zu verwenden. Versuchen Sie, bei der Standardbenennung zu bleiben. Wenn keine Option, versuchen Sie es mit # 1. Wenn es immer noch nicht für Ihren speziellen Anwendungsfall funktioniert und Sie wirklich keine Optionen mehr haben - erkunden Sie # 2. Viel Glück!

20
Kaloyan Kosev

Bearbeiten Sie Ihre package.json:

"build": "react-scripts build && mv build webapp"
33
Félix

Antwort-App-Version 2+ erstellen

Für aktuelle (> v2) Versionen von create -react-app (und möglicherweise auch älter) fügen Sie Ihrem package.json die folgende Zeile hinzu und bauen Sie dann neu auf.

"homepage": "./"

Sie sollten jetzt sehen, dass build/index.html relative Links ./static/... anstelle von Links zum Server-Root enthält: /static/....

7
Malcolm Dwyer

Die Antwort von Félix ist korrekt und wird von Dan Abramov selbst unterstützt.

Für diejenigen, die die Struktur der Ausgabe selbst (im Ordner build) ändern möchten, können Post-Build-Befehle mithilfe von postbuild ausgeführt werden, das automatisch nach dem in der Datei package.json definierten build-Skript ausgeführt wird.

Das folgende Beispiel ändert es von static/ in user/static/, verschiebt Dateien und aktualisiert Dateiverweise in relevanten Dateien ( vollständige Gist 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
1

Basierend auf den Antworten von Ben Carp und Wallace Sidhrée :

Dies ist, was ich benutze, um meinen gesamten Erstellungsordner 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 in einem Unterordner auf Ihrem Server bereitstellen (Siehe Diese Antwort von einer anderen Frage).

1
gcoulby

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 verschiebt die JS-Dateien nach 'build/new-folder-name' und zeigt auf den neuen Speicherort im HTML.

1
Ben Carp

Ich hatte das Szenario gerne, möchte den Ordner umbenennen und den Build-Ausgabestandort ändern, und den folgenden Code in package.json mit der neuesten Version verwenden
"build": "reag-scripts build && mv build ../my_bundles",

0
Jaison

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

enter image description here

Öffnen Sie Ihre config/paths.js und ändern Sie die Eigenschaft buildApp im Objekt exports in Ihren Zielordner. (Hier gebe ich 'react-app-scss' als Zielordner an)

module.exports = {
.....
appBuild: resolveApp('build/react-app-scss'),
.....
}

enter image description here

Lauf

npm run build

Hinweis: Es wird davon abgeraten, plattformabhängige Skripte auszuführen

0
Vignesh M

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 - ändere den Pfad in: __dirname + './../-- dein Verzeichnis deiner Wahl--'
  3. config/paths.js - Zeile 68 - Update auf resolveApp ('./-- Ihr Verzeichnis Ihrer Wahl--')

ersetzen Sie das Verzeichnis Ihrer Wahl durch das Ordnerverzeichnis, auf dem es erstellt werden soll

beachten Sie, dass der von mir angegebene Pfad etwas unsauber sein kann. Dies ist jedoch alles, was Sie tun müssen, um die Konfiguration zu ändern.

0
Jerry Lin