요약:

create-react-app 컴파일해야 하는 경우 모노 리포지토리 내부의 공유 패키지와 잘 작동하지 않습니다(내 TypeScript 공유 유형 패키지의 경우)

.

craco는 CRA 5에서 공식적으로 작동하지 않지만 Craco 7 alpha에서는 최소한 이 문제를 해결하기에 충분합니다.

craco 구성:

const fs = require('fs');
const path = require('path');
const cracoBabelLoader = require('craco-babel-loader');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp('../packages')],
      },
    },
  ],
};

이것은 빠른 것입니다. 내 모노레포에서 공유types 패키지를 사용하기 위해 오늘 많은 어려움을 겪었습니다. 내 구조는 다음과 같습니다.

/.git
/app  // react application with CRA 5
  /src
  package.json
/gateway
  /src
  package.json
/packages
  /types
    ...
    package.json
package.json

나는 사용하고 있습니다:

생성 반응 앱 5

원사 작업 공간

타자기

문제

여기 내 gateway 와 app 가 모두 packages/types 에 따라 있습니다. gateway는 잘 작동하지만 app는 CRA 구성의 제한 사항이므로 app/src 외부에서 파일을 가져오고 있다고 불평합니다.

해결책

나는 방출을 시도했지만 아무것도 작동하지 않는 토끼 굴로 내려갔습니다. 그래서 나는 그 커밋을 되돌리고 [email protected] 를 진행했습니다. 내부app 실행:

$ yarn add [email protected]

그런 다음 에서 this answer을 찾아 필요에 맞게 편집했습니다.

const fs = require('fs');
const path = require('path');
const cracoBabelLoader = require('craco-babel-loader');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp('../packages')],
      },
    },
  ],
};

고마워요, 당신은 내 하루를 구했습니다. 이제 create-react-app 에 찬성하여 next.js 삭제 티켓을 만들고 다음 기술 부채 회의에 추가하겠습니다.