require가 반응에 실패하는 경우 수행할 작업

require의 require는 문자열 대신 ES 모듈을 반환하기 때문에 실패합니다. 해결책은 "require('../path/to/image.jpg').default;"를 통해 이를 도입하는 것입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

require가 실패하면 어떻게 해야 하나요?

react 프로젝트에서 require에 의해 도입된 잘못된 이미지에 대한 이유와 해결책

Cause

create-react-app을 사용하고 이미지를 가져와야 하는 경우 require는 문자열 대신 ES 모듈을 반환합니다. 이는 file-loader에서 esModule 옵션이 기본적으로 활성화되어 있기 때문입니다.

Solution

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

require와 import

require의 차이점은 commonjs의 사양이고, node에 구현된 API는 es의 구문이며, 이는 컴파일러에서 처리됩니다. 따라서 import는 모듈 종속성에 대한 정적 분석을 수행할 수 있으며 webpack, 롤업 등을 사용하여 트리쉐이킹을 수행할 수 있습니다.

Commonjs는 값의 복사본을 내보내고, require는 복사된 값을 도입하고(참조 유형은 참조만 복사함), es 모듈은 기본 유형이든 애플리케이션 유형이든 관계없이 동일한 값(내보내기 기본값 제외)을 내보냅니다.

작성 방법에는 차이가 있습니다. 가져오기의 경우 import *를 사용하여 모든 내보내기를 도입하거나 import aaa, {bbb}를 사용하여 각각 기본 내보내기와 기본이 아닌 내보내기를 도입할 수 있는데 이는 require보다 더 유연합니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 require가 반응에 실패하는 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!