create-react-app에서 src 폴더를 다른 폴더로 변경하려면 어떻게 해야 합니까?

create-react-app에서 src 폴더를 다른 폴더로 변경하려면 어떻게 해야 합니까?

를 사용할 수 있는지 알고 싶습니다.react-script이름을 바꾸다src와 같은 다른 무언가에 대해서app폴더

react-app-rewired를 사용하여 react 경로 구성을 재정의할 수 있습니다.제 경우 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;
    },
}

이게 네 질문에 대한 답이 될지는 모르겠지만 시도해볼게.디렉토리 구조는 다음과 같습니다.

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

/root/package.json에는 다음과 같은 내용이 있습니다.

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

그리고 /root/app/matrix.json은 다음과 같습니다.

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

Reactjs 개발 버전을 실행하려면 /root에서 npm serve를 실행하여 개발 버전을 제공합니다.

node와 express를 사용하여 Reactj의 실제 버전을 실행하고 있습니다. /root에서 npm build를 실행하여 /root/app/build 디렉토리를 생성하기만 하면 됩니다.다음과 같은 라우터가 있습니다.

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

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

따라서 노드에서 /root/app.js를 실행하고 "/"로 서핑하면 /root/app/public/index.html과 /root/app/index.js가 열립니다.

그게 도움이 됐으면 좋겠어요.

react-app-rewired 에서는, 이 정확한 커스터마이즈가 가능합니다.

1

설치하다react-app-rewired개발 종속성:

npm install --save-dev react-app-rewired

2

인package.json, 이 행들을 변경합니다.

"scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    ...
}

로.

"scripts": {
    "react-start": "react-app-rewired start",
    "react-build": "react-app-rewired build",
    "react-test": "react-app-rewired test",
    ...
}

3

작성하다config-overrides.json다음 내용으로 프로젝트 디렉토리 루트에 파일을 저장합니다.

const paths = require('react-scripts/config/paths')
const path = require('path')

// Make the "app" folder be treated as the "src" folder
paths.appSrc = path.resolve(__dirname, 'app')
// Tell the app that "src/index.js" has moved to "app/index.js"
paths.appIndexJs = path.resolve(__dirname, 'app/index.js')

이제 당신의app폴더는 새 폴더입니다.src!

---

또한 "public" 폴더 이름과 같은 다른 많은 항목을 사용자 정의할 수 있습니다.

paths.appPublic = path.resolve(__dirname, 'subfolder/public')
paths.appHtml = path.resolve(__dirname, 'subfolder/public/index.html')

또, 그 장소도 변경할 수 있습니다.package.json그리고.node_modules전체 목록은 여기를 참조하십시오.

오래된 질문인 건 알지만 누군가에게 도움이 될지도 모르기 때문에 제 해결책을 올리겠습니다.

다음과 같은 방법으로 작업을 수행했습니다.

1. 달려.npm run eject이것에 의해, create-react-app 의 내부 설정 정보가 표시됩니다.
2. 를 엽니다.package.json및 아래의 각 정규식을 편집합니다.jest.collectCoverageFrom그리고.jest.testMatch테스트 경로와 일치합니다.
3. 경로 변경appSrc,appIndexJs그리고.testsSetup에서config/paths.js파일

T0astBread의 답변은 거의 완벽하지만 modules.js에서 놓친 "src"에 대한 추가 참조가 있습니다.

구체적으로는:

    return {
      src: paths.appSrc,
    };

로 변경할 필요가 있다

    return {
      newSrcName: paths.appSrc,
    };

이것은 훌륭한 질문입니다.이 폴더명을 변경하는 유효한 시나리오는 오래된 리액트 프로젝트를 CRA로 이행하는 경우입니다.

다음은 파손을 줄일 수 있는 또 다른 접근법입니다.

심볼 링크를 만듭니다.

ls -s ./app src

그리고 이것을 에 추가합니다.config-overrides.js웹 팩이 심볼 링크를 처리할 수 있도록 하려면:

module.exports = (config, ...rest) => {
    return { ...config, resolve: { ...config.resolve, symlinks: false } };
};

으로, 「」, 「」를 인스톨 .react-app-rewired것것을jjjjjjjjj.json:json:json:

"start" : "어플리케이션 재연결 시작",

Cong Dan Luong의 답변은 폴더 이름 변경에 관한 한 정확하지만, 농담으로 테스트를 중단합니다.다음과 같이 config-overrides.js module.exports 부분을 전개해야 합니다.

module.exports = {
  jest: function(config) {
    config.collectCoverageFrom = ['client/**/*.{js,jsx,ts,tsx}', '!client/**/*.d.ts'];
    config.testMatch = [
      '<rootDir>/client/**/__tests__/**/*.{js,jsx,ts,tsx}',
      '<rootDir>/client/**/*.{spec,test}.{js,jsx,ts,tsx}',
    ];
    config.roots = ['<rootDir>/client'];
    return config;
  },

  // The paths config
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, 'client/index.js');
    paths.appSrc = path.resolve(__dirname, 'client');
    return paths;
  },
};

'src'는 'client'는 'client'는 'client'는 'client'는 'client'는 'client'는 'client'는 'client'는 'client'는 'client'가 됩니다. npm test이제 동작합니다.

심볼릭 링크는 이 작업을 원하는 이유를 나타낼 수 있습니다.

ln -s ./src/ ./app

src, 할 수 .app더입니니다다

저처럼 vscode를 사용하는 경우 다음을 수행할 수 있습니다.

Cmd-shift-p설정을 하여 다음합니다.

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

다른 편집자에게도 똑같이 할 수 있습니다.

프로젝트의 루트에 파일을 만들고 이 코드를 삽입한 후 실행합니다.

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

언급URL : https://stackoverflow.com/questions/44448851/how-do-i-change-src-folder-to-something-else-in-create-react-app