sourcecode

create-react-app에서 상대 경로 가져오기(/../..../redux/action/action1)를 사용하지 않는 방법

codebag 2023. 2. 22. 21:53
반응형

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은 헷갈리기 때문이다.reduxImport하다 이름을 됩니다.src/appapp/....

일부러 @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';

Webpack 2 해결 레퍼런스

위의 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-scriptspackage.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-resolvermodule-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

반응형