How do I change `src` folder to something else in create-react-app

问题

I'd like to know if it's possible using react-script to rename src to something else like app folder

回答1:

You can use react-app-rewired to override react paths configuration. In my case, I can change the paths in config-overrides.js file

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;
    },
}

回答2:

I know this is an old question but I'm still gonna post my solution since it might help someone.

I got it working by doing the following:

Run npm run eject. This exposes some internal configuration stuff from create-react-app
Open your package.json and edit the respective regexes under jest.collectCoverageFrom and jest.testMatch to match your test path
Alter the paths for appSrc, appIndexJs and testsSetup in the config/paths.js file

回答3:

Not sure if this answers your question but I'll give it a shot. My directory structure looks like this:

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

My /root/package.json has this in it:

  "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"
  },

and my /root/app/package.json looks like this:

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

To run the development version of Reactjs, in the /root I can just npm run serve to serve up the dev version.

I am using node and express, so to run the production version of Reactjs, in the /root I can just npm run build to create the /root/app/build directory. I have a router that looks like this:

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

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

so when I run /root/app.js in node and surf to "/" it opens up /root/app/public/index.html and then /root/app/index.js.

Hopefully that helps.

回答4:

Perhaps a symbolic link might address your reasons for wanting to do this:

ln -s ./src/ ./app

The src folder will remain but you can work with it as if it was the app folder.

If, like me you're using vscode you can also do:

Cmd-shift-p search workspace settings, and add the following:

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

You could do similarly with other editors

回答5:

Create file in root of your project, insert this code and run.

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');
});

来源：https://stackoverflow.com/questions/44448851/how-do-i-change-src-folder-to-something-else-in-create-react-app

标签

reactjs

create-react-app

react-scripts