반응에서 상대 경로 가져오기 지옥 피하기
3919 단어 tutorialjavascriptreactwebdev
create-react-app을 사용하여 react Single Page React Application 구축을 시작할 수 있습니다. 빌드 도구를 함께 꿰매는 번잡함을 없애고 코드에 집중할 수 있는 도구입니다. 재미있는 것들.
컴퓨터에 Node >= 14.0.0 및 npm >= 5.6이 설치되어 있어야 합니다.
다음을 실행하여 프로젝트를 만들 수 있습니다.
npx create-react-app my-app
cd my-app
npm start
상대적 수입
이 도구를 사용하여 반응하는 웹 애플리케이션을 만들었습니다.
깊지 않은 폴더 트리에서 파일 가져오기의 경우 상대 가져오기 경로가 좋습니다.
내 프로젝트가 점점 커지면서 많은 경우에 폴더 깊이가 증가하면서 더 많은 파일을 가지기 시작합니다.
모듈 가져오기는 상대 가져오기 경로 지옥을 만들기 시작합니다.
import { makeBid } from "../../../../../redux/actions/products";
와 같은 가져오기가 있음을 알 수 있습니다.
음, 상대 가져오기 경로에는 몇 가지 단점이 있습니다.
vscode와 같은 최신 IDE는 충분히 스마트하여 모듈을 가져올 수 있습니다. 그러나
../../../../../
와 같은 경로는 매우 불쾌하며 깨끗한 코드를 구성하지 않습니다. 절대 수입
절대 경로를 사용하여 이러한 문제를 해결할 수 있습니다.
절대 경로를 사용하여 모듈 가져오기를 지원하도록 애플리케이션을 구성해야 합니다. 이것은 프로젝트의 루트에서 jsconfig.json
또는 tsconfig.json
파일을 구성하여 수행할 수 있습니다. 프로젝트에서 TypeScript를 사용하고 있다면 이미 tsconfig.json
파일이 있을 것입니다.
JavaScript 프로젝트의 경우 jsconfig.json
파일이 프로젝트의 루트에 아직 없으면 생성할 수 있습니다.
아래 코드를 파일에 붙여넣습니다.
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"]
}
Typescript 프로젝트의 경우 이미 tsconfig.json
파일이 있을 가능성이 큽니다. compilerOptions 내에서 baseUrl 설정을 구성할 수 있습니다. 다음 코드 줄이 포함되어 있는지 확인하십시오.
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"]
}
이제 절대 가져오기를 사용할 준비가 되었습니다.
이제 내 코드는 다음과 같습니다.
import { makeBid } from "src/redux/actions/products";
와 같은 절대 경로를 사용하여 가져오는 방법을 확인할 수 있습니다.
이제 가져오는 모듈의 위치를 아무 것도 깨뜨릴 염려 없이 변경할 수 있습니다. 또한 모듈에 대한 경로를 쉽게 찾을 수 있습니다.
이것이 당신에게 유용하기를 바랍니다. 행복한 코딩✨.
당신은 트위터에 있습니까? 하자
Reference
이 문제에 관하여(반응에서 상대 경로 가져오기 지옥 피하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/smitterhane/avoid-relative-path-import-hell-in-react-36in
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"]
}
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"]
}
Reference
이 문제에 관하여(반응에서 상대 경로 가져오기 지옥 피하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/smitterhane/avoid-relative-path-import-hell-in-react-36in텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)