create-react-app에서 상대 경로 가져오기(/../..../redux/action/action1)를 사용하지 않는 방법
create-contract-app을 만듭니다.「Import」, 「Import」, 「Import」, 「Import」, 「Import」의 예를 나타냅니다.import action from '../../../redux/action
module-alis npm 패키지를 사용해 봤지만 성공하지 못했습니다.폴더 이름 또는 별칭(절대 경로)을 기준으로 가져올 수 있는 플러그인이 있습니까?
§:import action from '@redux/action'
★★★★★★★★★★★★★★★★★」import action from '@resource/css/style.css'
하다라는 을 만들어 보세요..env
이치노
NODE_PATH=src
그런 다음 개발 서버를 재시작하십시오. 것이든 수 .src
상대 경로 없이요
주의: 폴더에 전화하는 것은 권장하지 않습니다.src/redux
은 헷갈리기 때문이다.redux
Import하다 이름을 됩니다.src/app
app/...
.
일부러 @redux
노드 해결 알고리즘과 호환되지 않기 때문입니다.
이제 승인된 답변의 접근 방식이 대체되었습니다.이제 Create React App은 여기서 설명하는 것과 같이 절대 경로를 설정하는 다른 방법이 있습니다.
요약하면 다음 절차를 수행하여 절대 경로를 사용하여 모듈 Import를 지원하도록 애플리케이션을 설정할 수 있습니다.
프로젝트 루트에 다음과 같이 jsconfig.json/tsconfig.json을 작성/편집합니다.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
이 작업을 수행한 후 "src" 하위 디렉토리(다음 예제에서는 구성 요소가 src의 하위 디렉토리)를 지정하여 가져올 수 있습니다.
import Button from 'components/Button'
웹 팩 설정에서 webpack 2 resolve 속성을 사용할 수 있습니다.
resolve를 사용한 웹 팩 설정 예:
여기서 구성 요소와 유틸리티는 React 구성 요소를 포함하는 독립 폴더입니다.
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
components: path.resolve(__dirname, 'src', 'scripts', 'components'),
utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
}
}
그런 다음 파일로 직접 가져올 수 있습니다.
import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';
위의 Ben Smith 솔루션을 사용해 본 후 eslint에서 절대 경로 Import에 대한 불만이 발견되면 다음 행을 eslint 설정에 추가합니다.
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
자신의 보일러 플레이트를 폴더 이름과 함께 사용하는 경우 'src'를 폴더로 바꿉니다.
2월 © 2 ★
「」의 예를 에 예를 제시하겠습니다.하다
목표: Import처
myapp\src\App.css
myapp\src\pages\홈페이지.js
파일:jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
}
}
파일:src\pages\HomePage.js
import "App.css";
craco 또는 rewired create-react-app의 별칭 솔루션은 craco, react-app-rewired, customize-cra와 같이 시스템의 react-app-alias입니다.
기재된 시스템의 문서에 따라 교환해 주십시오.react-scripts
에package.json
다음 설정을 실시합니다.
리액트 앱의 재배선
// config-overrides.js
const {aliasWebpack, aliasJest} = require('react-app-alias')
const options = {} // default is empty for most cases
module.exports = aliasWebpack(options)
module.exports.jest = aliasJest(options)
크라코
// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')
module.exports = {
plugins: [
{
plugin: CracoAliasPlugin,
options: {}
}
]
}
모든.
다음과 같이 json 에일리어스를 설정합니다.
// tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"example/*": ["example/src/*"],
"@library/*": ["library/src/*"]
}
}
}
그리고 이 파일을 에 추가합니다.extends
메인 타이프스크립트 설정 파일의 섹션:
// tsconfig.json
{
"extends": "./tsconfig.paths.json",
// ...
}
저는 이 문제를 해결하기 위해 프로젝트에 babel-plugin-module-resolver를 사용하고 있습니다.babel-plugin-module-resolver도 module-alis와 동일합니다.그래서 그냥 module-alis 문제를 해결하는 게 좋을 것 같아요.
왜 module-alis 사용이 실패했는지 말해주지 않아서요?그래서 어떻게 고치는지 보여줄 수 없어요.
이유를 모르는 사이에 해결책을 포기하지 마세요!
포장되어 있습니다.json 파일,
스크립트 오브젝트에서 이 코드를 꺼냅니다.
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"eject": "NODE_PATH=src/ react-scripts eject"
},
앱에서 절대 경로 가져오기를 활성화합니다.
나는 어떤 대답도 통하지 않았다.일부는 전혀 작동하지 않았고 다른 일부는 작동했지만 Import는 이미 내부에 있었습니다.src
예를 들어 다음과 같습니다.
import something from 'path/to/file'
.
저는 다음과 같은 일을 하고 싶었습니다.
import something from 'src/path/to/file'
해결 방법은 다음과 같습니다.
tsconfig.json
{
"compilerOptions": {
// ...
"baseUrl": ".",
"rootDirs": [
"src"
]
},
"include": [
"src"
]
}
언급URL : https://stackoverflow.com/questions/45213279/how-to-avoid-using-relative-path-imports-redux-action-action1-in-cre
'sourcecode' 카테고리의 다른 글
현재 페이지가 워드프레스 카테고리 페이지인지 확인하시겠습니까? (0) | 2023.02.22 |
---|---|
평가 없이 "완화된" JSON 구문 분석 (0) | 2023.02.22 |
WordPress 플러그인 파일이 포함된 zip 파일 설치 프로그램을 만들려면 어떻게 해야 합니까? (0) | 2023.02.22 |
JSON에 목록 직렬화 중 (0) | 2023.02.22 |
워드프레스 투고 수정 시간 변경 방법 (0) | 2023.02.22 |