web-dev-qa-db-fra.com

react.js - exécution de npm run build avec des chemins personnalisés

Fonctionnement npm run build commande sur react-create-app le projet crée un dossier de construction et quelques chemins par défaut dans tous les fichiers comme dans les fichiers de carte:

{"version":3,"sources":["../static/js/main.500cb0d9.js" ...

Puis-je changer tous les chemins à l'intérieur du dossier de construction pour correspondre à mon BE, comme

{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...

package.json:

{
  "name": "reactTest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-month-picker": "^1.3.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
reactjsnpm-scriptsnpm-runreact-create-app
8
Itsik Mauyhas

Vous pouvez définir un chemin racine pour servir votre application React en production en utilisant l'une de ces deux méthodes:

1. En définissant une propriété de page d'accueil dans votre fichier package.json

Remarquez la ligne 5:

{
  "name": "reactTest",
  "version": "0.1.0",
  "private": true,
  "homepage": "mywebsite/web",
  "dependencies": {
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-month-picker": "^1.3.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

( voir documentation )

2. Utilisation de la variable d'environnement PUBLIC_URL

Lorsque vous exécutez le travail build, ajoutez la var env juste avant, comme ceci:

PUBLIC_URL=mywebsite/web npm run build

( voir documentation )

Que fait-il?

Ces méthodes pas changeront les chemins dans les fichiers de carte source, ceux-ci seront toujours relatifs, mais cela le sera vous permettra de déployer votre React à votre serveur Web avec un chemin absolu de votre choix.

Il en résultera que les chemins d'accès qui incluent les bundles JavaScript et CSS dans le index.html généré seront absolus, selon la valeur que vous avez définie:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="mywebsite/web/manifest.json">
    <link rel="shortcut icon" href="mywebsite/web/favicon.ico">
    <title>React App</title>
    <link href="mywebsite/web/static/css/main.c17080f1.css" rel="stylesheet">
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="mywebsite/web/static/js/main.dbfd0e89.js"></script>
</body>

</html>
9
Patrick Hund