Create React App에서 'src' 디렉터리 외부의 자산을 어떻게 가져올 수 있나요?

create-react-app의 src 디렉터리 외부에서 상대 가져오기

Create-react-app은 외부에서 자산을 가져오는 것에 대해 엄격한 제한을 시행합니다. src 디렉토리. 이 제한은 상대 가져오기가 src 디렉터리 경계를 위반하는 것을 방지하는 ModuleScopePlugin을 통해 구현됩니다.

근본 원인

이 제한은 모든 애플리케이션 관련 파일이 src 디렉터리 경계 내에 유지되도록 보장합니다. src 디렉토리, 코드와 다른 프로젝트 간의 명확한 구분 제공 자산.

영향

공용 폴더의 이미지에 액세스하는 등 src 디렉터리 외부에서 파일을 가져오려고 하면 ModuleScopePlugin 제한을 나타내는 오류 메시지가 표시됩니다.

비공식 솔루션

rewire를 활용하여 웹팩 구성을 수정하고 ModuleScopePlugin을 제거하는 비공식 해결 솔루션이 있습니다. 그러나 이 접근 방식은 플러그인에서 제공하는 보안 및 기능 향상을 약화시키므로 권장되지 않습니다.

권장 접근 방식

생성물의 무결성을 유지하면서 문제를 해결하려면 -react-app 환경에서는 다음을 수행할 수 있습니다.

1. 다음으로 자산 이동 src: 원하는 이미지나 기타 자산을 src 디렉터리로 전송합니다.
2. 공용 폴더에서 직접 URL 사용: 가져오는 대신 해당 URL을 사용하여 공용 폴더의 자산에 직접 액세스합니다. .

수입의 장점 src

src에서 가져오면 여러 가지 장점이 있습니다.

• 최적화된 청크: Webpack은 src의 자산을 최적으로 번들링하여 최적의 로딩 효율성을 보장합니다.
• 포장 크기 감소: src에서 가져오면 빌드 폴더에서 중복이 방지되어 전체 패키지 크기가 최소화됩니다.

위 내용은 Create React App에서 'src' 디렉터리 외부의 자산을 어떻게 가져올 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!