React 항목 이 포장 주 소 를 어떻게 수정 하 는 지 상세 하 게 설명 합 니 다(출력 파일 주 소 를 컴 파일 합 니 다)

좋아,필 자 는 백 엔 드 개발 이 야.예전 에는 C/S 프로젝트 출신 으로 웹 전단 기반 이 없 었 고,웹 개발 을 더 잘 이해 하기 위해 지난해 부터 회사 가 사용 하 는 전단 프레임 워 크 인 React 를 사용 해 팀 내부 에서 사용 하 는 시스템 을 구축 하려 고 시도 했다.이 프로젝트 의 개발 을 통 해 저 는 전단 동료 들 의 어려움 을 잘 이해 하고 인터페이스 문 서 를 잘 쓰 겠 다 는 결심 을 굳 혔 습 니 다.
최근 에 자신 이 만 든 이 내부 시스템 을 회사 의 통일 플랫폼 으로 옮 겼 을 때 작은 문제 가 발생 했 습 니 다.회사 에서 포장 을 요구 하 는 디 렉 터 리 이름 은 dist 이 어야 합 니 다.이 프로젝트 는 create-react-app 으로 만 들 었 기 때문에 포장 한 디 렉 터 리 는 기본 build 입 니 다.
그래서 포장 목록 을 어떻게 수정 하 는 지 에 대한 자 료 를 찾기 시작 했다.인터넷 에서 마음대로 검색 하면 다음 과 같은 해결 방안 이다.
eject 명령 을 사용 하여 설정 을 노출 시 킨 다음 포장 주 소 를 수정 합 니 다.
이 명령 을 사용 하면 거 스 를 수 없습니다.실행 하기 전에 코드 를 백업 하거나 버 전 라 이브 러 리 에 제출 하 십시오.
1.eject 명령 으로 설정 노출:

npm run eject

2.노출 된 프로필 config/path.js 를 수정 하고 app Build 를 출력 할 위치 로 변경 합 니 다.
3.npm install 명령 을 사용 하여 설치 의존 을 한 다음 npm run build 패 키 지 를 실행 합 니 다.
이 방안 은 물론 아무런 문제 가 없습니다.이 를 통 해 create-react-app 는 React 프로젝트 를 만 들 때 많은 개발 자 들 이 지나치게 관심 을 가지 지 않 아 도 되 는 설정 항목 을 숨 기 고 전단 의 개발 을 최대한 간소화 했다 는 것 을 알 수 있 습 니 다.eject 명령 은 이 설정 항목 을 드 러 낼 수 있 습 니 다.
eject 의 폐단
주의해 야 할 것 은 eject 명령 은 거 스 를 수 없다 는 것 이다.이 명령 을 사용 하면 개발 디 렉 터 리 면 에 많은 프로필 과 스 크 립 트 를 받 아들 여야 합 니 다.
이것 은 가장 중요 한 것 이 아 닙 니 다.제 프로젝트 는 antd 를 UI 프레임 워 크 로 사 용 했 기 때문에 react-app-rewired 라 는 동쪽 을 사 용 했 기 때문에 저 는 eject 이후 npm run build 를 실행 하면 잘못 보고 할 수 있 습 니 다.
react-app-rewired 가 뭐 예요?
백 엔 드 개발 로 서 가장 큰 감명 을 받 은 것 은 전단 의 인터넷 자료 가 너무 적 다 는 것 이다.각종 구조,기술 업데이트 가 너무 빠 르 기 때문에 많은 블 로그 의 해결 방안 은 이미 시대 에 뒤떨어 졌 다 는 것 이다.당신들 이 본 나의 이 문장 은 아마도 곧 시대 에 뒤떨어 질 것 입 니 다.그러나 나 는 사고방식 을 모두 에 게 가 르 칠 것 입 니 다.말하자면,기술적 인 문제 에 부 딪 히 면 정말 해결 할 수 없 으 면 어떻게 합 니까?당연히 공식 문 서 를 찾 지.
react-app-rewired공식 문서를 통 해 이 도구 의 한 기능 이 ejb 가 아 닌 상태 에서 설정 파일 을 수정 하 는 것 임 을 알 수 있 습 니 다.앞에서 말 한 antd 도 설정 을 수정 하기 위해 도입 한 도구 입 니 다.기능 이 그렇다면 포장 주 소 를 수정 하 는 것 도 가능 할 것 이다.
react-app-rewired 를 사용 하여 ejb 없 이 포장 주 소 를 수정 합 니 다.
사고 방향 은 있 지만 전단 기반 이 약 한 백 스테이지 개발 에 있어 어떻게 실 체 를 해 야 할 지 모 르 겠 습 니 다.몇 편의 issue 를 본 후에Changing the default paths,Change build output path마침내 방법 을 찾 았 습 니 다.
우선 react-app-rewired 를 도입 해 야 합 니 다.여 기 는 방법 을 쓰 지 않 겠 습 니 다.여러분 은 공식 문 서 를 참고 하 세 요.유행 이 지나 지 않 습 니 다.
도입 후 config-over rides.js 파일 이 있 습 니 다.제 가 antd 를 도 입 했 기 때문에 내용 이 있 습 니 다.

//       ant     
const {injectBabelPlugin} = require('react-app-rewired');

module.exports = function override(config, env) {
  // antd     
  config = injectBabelPlugin(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}], config);
  return config;
};

다음 코드 를 추가 합 니 다.

//       ant     
const {injectBabelPlugin} = require('react-app-rewired');

module.exports = function override(config, env) {
  // antd     
  config = injectBabelPlugin(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}], config);

+  //   path  
+  const path = require('path');
+  const paths = require('react-scripts/config/paths');
+  paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');
+  config.output.path = path.join(path.dirname(config.output.path), 'dist');

  return config;
};

그러면 npm run build 를 다시 실행 하면 됩 니 다.문제 해결.
만약 당신 이 이미 eject 작업 을 진행 했다 면,매우 유감스럽게도 버 전 라 이브 러 리 를 통 해 버 전 을 반환 할 수 밖 에 없습니다.
끝:설정 코드 분석
여기에 와 서 일부 학생 들 은 왜 상기 코드 가 문 제 를 해결 할 수 있 는 지 만족 하지 않 을 것 이다.문외한 으로서 나 는 나의 이해 에 따라 설명 할 것 이다.

const path = require('path');

이 줄 코드 는 require.js 를 기반 으로 가방 을 도입 하 는 도구 입 니 다.이 코드 를 통 해 path 를 가 져 와 야 경 로 를 처리 할 수 있 습 니 다.

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

React-scripts 에는 React 프로젝트 가 패키지 에 사용 되 는 명령 과 프로필 이 있 습 니 다.eject 를 진행 하면 config 와 script 디 렉 터 리 의 내용 이 React-scripts 의 동명 디 렉 터 리 와 놀 라 울 정도 로 비슷 합 니 다.eject 가 이곳 의 설정 을 드 러 냈 다 고 볼 수 있 습 니 다.이 코드 는 항목 의 경로 설정 을 가 져 오기 위 한 것 입 니 다.

paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');

이 줄 코드 는 설정 에 있 는 appBuild 디 렉 터 리 를 수정 하 는 것 입 니 다.React 프로젝트 는 build 를 진행 할 때 여기 설 정 된 디 렉 터 리 에 따라 작 동 합 니 다(예 를 들 어 포 장 된 코드 크기 검사,Gzip 계산 등).수정 해 야 합 니 다.그렇지 않 으 면 포장 에 실패 합 니 다.

config.output.path = path.join(path.dirname(config.output.path), 'dist');

이 코드 는 우리 의 목적 을 실현 하 는 근원 입 니 다.프로젝트 포장 주 소 를 수정 하 는 것 입 니 다.
자,여기까지 본문 이 끝 났 습 니 다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.