web-dev-qa-db-fra.com

Comment changer le dossier `src` en quelque chose d'autre dans create-react-app

J'aimerais savoir s'il est possible d'utiliser react-script pour renommer src en quelque chose comme le dossier app

reactjscreate-react-appreact-scripts
16
rstormsf

Je sais que c'est une vieille question mais je vais quand même poster ma solution car cela pourrait aider quelqu'un.

Je l'ai obtenu en procédant comme suit:

  1. Exécutez npm run eject. Cela expose certains éléments de configuration internes de create-react-app
  2. Ouvrez votre package.json et éditez les expressions rationnelles respectives sous jest.collectCoverageFrom et jest.testMatch pour qu'elles correspondent à votre chemin de test.
  3. Modifiez les chemins pour appSrc, appIndexJs et testsSetup dans le fichier config/paths.js
2
T0astBread

Créez un fichier à la racine de votre projet, insérez ce code et exécutez-le.

const fs = require('fs');
const path = './node_modules/react-scripts/config/paths.js';
const folder = 'app';

fs.readFile(path, 'utf8', (err, data) => {
 if (err) throw err;
 data = data.replace(/src/g, folder);
 fs.writeFile(path, data, 'utf8');
});

0
IT VLOG

Vous pouvez utiliser react-app-rewired pour remplacer la configuration des chemins de réaction . Dans mon cas, je peux changer les chemins dans le fichier config-overrides.js

const path = require('path');

module.exports = {
    paths: function (paths, env) {        
        paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js');
        paths.appSrc = path.resolve(__dirname, 'mysrc');
        return paths;
    },
}
0
Cong Dan Luong

Je ne sais pas si cela répond à votre question, mais je vais tenter le coup. Ma structure de répertoire ressemble à ceci:

/root
--/app
----/build
----/public
------index.html
----/src
------index.js
app.js
package.js

Mon/root/package.json contient ceci:

  "scripts": {
    "build": "cd app && npm run build",
    "start": "node app.js",
    "serve": "cd app && npm run start"
  },
  "dependencies": {
    "express": "^4.8.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.17"
  },

et mon /root/app/package.json ressemble à ceci:

  "scripts": {
    "build": "react-scripts build",
    "start": "set PORT=3000 && react-scripts start"
  },
  "dependencies": {
    "react-scripts": "^1.0.17"
  }

Pour exécuter la version de développement de Reactjs, dans le répertoire/root, je peux simplement exécuter NPM servir à servir la version dev.

J'utilise node et express, donc pour exécuter la version de production de Reactjs, Dans le répertoire/root, je peux simplement exécuter npm build pour créer le répertoire/root/app/build. J'ai un routeur qui ressemble à ceci:

var options = {root : config.siteRoot + '/app/build'};

mainRte.all('/', function(req, res) {
    console.log('In mainRte.all Root');
    res.sendFile('index.html', options);
});

donc quand je lance /root/app.js dans node et que je surfe sur "/", il ouvre /root/app/public/index.html puis /root/app/index.js.

Espérons que cela aide.

0
Joe Shmoe

Peut-être qu'un lien symbolique pourrait expliquer vos raisons de vouloir faire cela: 

ln -s ./src/ ./app

Le dossier src reste, mais vous pouvez le manipuler comme s'il s'agissait du dossier app. 

Si, comme moi, vous utilisez vscode, vous pouvez aussi faire: 

Cmd-shift-p paramètres de l'espace de travail de recherche et ajoutez les éléments suivants: 

{
  "files.exclude": {
      "src/": true
  }
}

Vous pourriez faire la même chose avec d'autres éditeurs

0
Dan