파트 3: React-App-Rewired로 템플릿 설정하기

완벽한 reactJS 템플릿으로 이야기를 계속하면서 이번에는 프로젝트를 수정하는 데 필수적이며 최근에 많은 개발자가 크고 작은 프로젝트에서 사용을 채택한 항목을 하나 더 구성할 것입니다. 또 다른 모험을 할 준비가 되셨나요?

우리는 무엇을 해결하고 싶습니까?

EJECT 알아보기

우리가 react-app-rewired를 설정하는 방법을 이해하기 전에 우리는 해결하려는 것이 무엇인지 이해해야 하며 유명한 배출에 도달합니다.

create-react-app은 완전한 반응 프로젝트를 준비하는 데 필요한 모든 종속성을 구성하고 추상화하는 npm(Node Package Manager) 라이선스 패키지입니다. 이를 위해 그는 내부적으로 다음과 같은 몇 가지 사항을 설정합니다.

Jest: 반응 애플리케이션에서 단위 테스트에 사용됩니다.

Babel: javascript/typescript 코드를 컴파일하고 이전 버전으로 변환하는 데 사용됩니다.

Webpack: 모든 애플리케이션 파일의 번들 생성을 담당합니다.

이러한 모든 설정은 create-react-app 프로젝트 내에서 암시적이고 추상화됩니다. 발생하는 실제 문제는 많은 개발자가 무엇보다도 jest 변수 변경, babel 경로 변경과 같은 프로젝트 내 설정을 변경해야 한다는 것입니다.

이를 알면 create-react-app에는 emit이라는 구성이 있으며 그 안에 추상화된 구성을 제거하고 webpack, babel 및 jest의 구성 파일을 볼 수 있습니다.

그리고 EJECT는 왜 안되나요?

create-react-app은 제거 옵션을 허용하지만 많은 개발자는 많은 파일로 프로젝트를 더럽히는 것 외에도 create-react-app이 제공하는 추상화를 깨뜨리기 때문에 이 기능을 즐기지 않습니다. 이것이 react-app-rewired가 나타나는 방식입니다. 이를 통해 이러한 설정을 덮어쓸 수 있으므로 추상화된 구조를 깨지 않고 액세스할 수 있습니다.

이 이론은 복잡한 이론이므로 아래에 의심을 남겨주세요 :D

react-app-rewired 구성

패키지 설치

먼저 아래 명령어로 패키지를 설치하자.

yarn add react-app-rewired -D

스크립트 구성

react-app-rewired의 작동은 매우 간단합니다. 프로젝트에서 작동하게 하려면 아래와 같이 package.json에 액세스하고 스크립트(EJECT 제외)를 변경하여 react-scripts를 react-app-rewired로 바꾸십시오.

//package.json
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

재정의 파일 구성

결론적으로 구성 파일이 필요합니다. 다른 패키지 중에서 Eslint, Jest, Typescript와 마찬가지로 react-app-rewired가 제대로 작동하려면 구성 파일이 필요합니다. config-overrides.js라고 해야 하며 덮어쓸 설정을 내보내야 합니다. 아래 예를 참조하십시오.

// config-overrides.js
module.exports = {
  webpack: function (config, env) {
    return config;
  },
  jest: function (config) {
    return config;
  },
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      return config;
    };
  },
  paths: function (paths, env) {
    return paths;
  },
}

이 파일 내에서 다양한 웹팩 모듈 및 jest와 같은 통합 패키지에 대한 설정을 재정의할 수 있습니다.

최종 구조

최종 템플릿 구조가 어떻게 보이는지 확인하십시오.


Here 목적에 따라 구성 변경을 수행하기 위해 지식인 과정을 수강할 수 있습니다.

이상입니다. 읽고 템플릿에 통합할 수 있는 다른 항목에 대한 제안을 보내주셔서 다시 한 번 감사드립니다. :디