web-dev-qa-db-fra.com

Utiliser un dossier de sortie de construction personnalisé lors de l'utilisation de create-react-app

Facebook fournit une create-react-appcommande pour créer des applications de réaction. Lorsque nous exécutons npm run build, nous voyons la sortie dans le dossier /build. 

npm run build

Construit l'application pour la production dans le dossier de construction. C'est correctement bundles Réagit en mode production et optimise la construction pour le meilleur performance.

La construction est minifiée et les noms de fichiers incluent les hachages. Votre application est prêt à être déployé!

Comment pouvons-nous utiliser un dossier personnalisé au lieu de /build pour la sortie? Merci.

reactjscreate-react-app
25
6324

Vous ne pouvez pas modifier le nom du dossier de sortie de la construction avec les options de configuration actuelles.

De plus, vous ne devriez pas. Cela fait partie de de la philosophie derrière react-create-app : ils disent Convention over Configuration.

Si vous devez vraiment renommer votre dossier, je vois deux options:

  1. Juste après la fin du processus de construction, write écrit une commande qui copie le contenu du dossier de construction dans un autre dossier souhaité. Par exemple, vous pouvez essayez le package copyfiles npm , ou quelque chose de similaire.

  2. Vous pouvez essayer de éjecter react-create-app et modifier la configuration.

    Si vous n'êtes pas satisfait du choix de l'outil de construction et de la configuration, vous pouvez l'éjecter à tout moment. Cette commande supprimera la dépendance de construction unique de votre projet.

    Au lieu de cela, il copiera tous les fichiers de configuration et les dépendances transitives (Webpack, Babel, ESLint, etc.) directement dans votre projet afin que vous puissiez les contrôler entièrement. Toutes les commandes, à l'exception de l'éjection, continueront de fonctionner, mais elles pointeront vers les scripts copiés afin que vous puissiez les modifier. À ce stade, vous êtes seul.

    Cependant, il est important de noter que il s’agit d’une opération à sens unique. Une fois que vous avez éjecté, vous ne pouvez plus revenir en arrière! Vous perdez toutes les mises à jour futures.

Par conséquent, je vous recommanderais de ne pas utiliser de nom de dossier personnalisé, si possible. Essayez de vous en tenir à la dénomination par défaut. Si ce n'est pas une option, essayez # 1. Si cela ne fonctionne toujours pas pour votre cas d'utilisation spécifique et que vous êtes vraiment à court d'options, explorez # 2. Bonne chance!

20
Kaloyan Kosev

Editez votre package.json:

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

Réponse de Create-react-app Version 2+

Pour les versions récentes (> v2) de create-react-app (et éventuellement aussi antérieures), ajoutez la ligne suivante à votre package.json, puis régénérez.

"homepage": "./"

Vous devriez maintenant voir que build/index.html aura des liens relatifs ./static/... au lieu de liens vers la racine du serveur: /static/....

7
Malcolm Dwyer

La réponse de Félix est correcte et a été votée, soutenue par Dan Abramov lui-même .

Mais pour ceux qui voudraient changer la structure de la sortie elle-même (dans le dossier build), on peut exécuter des commandes post-construction à l'aide de postbuild, qui s'exécute automatiquement après le script build défini dans le fichier package.json.

L'exemple ci-dessous le change de static/ à user/static/, en déplaçant des fichiers et en mettant à jour des références de fichiers sur des fichiers pertinents ( Gist complet ici ):

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
Wallace Sidhrée

J'ai eu le scénario comme vouloir renommer le dossier et changer l'emplacement de sortie de la construction, et utilisé ci-dessous le code dans le package.json avec la dernière version
"build": "react-scripts build && mv build ../my_bundles",

0
Jaison