create-react-app에서 Import 바로가기/에일리어스를 만드는 방법

create-react-app에서 Import 바로가기/에일리어스를 만드는 방법

create-react-app에서 Import 바로가기/에일리어스를 설정하는 방법여기서부터:

import { Layout } from '../../Components/Layout'

다음과 같이 입력합니다.

import { Layout } from '@Components/Layout'

나는 가지고 있다webpack4.42.0 버전루트 디렉토리에 webpack.config.js 파일이 없습니다.이 코드를 사용하여 직접 생성하려고 했습니다.

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    }
  }
};

하지만 효과가 없는 것 같아요.나는 본 적이 있다.NODE_PATH=.에 있어서의 변종..env파일입니다. 하지만 더 이상 사용하지 않는 것이 좋습니다.그리고 또 제가...posstcss.config.jsTailwindCss를 설치하고 CSS 라이브러리를 Import하기 때문입니다.거기에 같은 코드를 붙이려고 했는데도 안 되더라고요.

드디어 Create React App v.3을 통해 가능

그냥 넣어주세요.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

안으로jsconfig.json또는tsconfig.jsonTypescript를 사용하는 경우

여기 이것에 대한 멋진 기사가 있습니다.

이것을 아카이브 하는 가장 간단한 방법은, 다음의 순서에 따릅니다.(@DennisVash와 같은 간단한 형식으로 표시)

1. 설치 - CRACO를 설치하고 설정합니다.

yarn add @craco/craco

# OR

npm install @craco/craco --save

2. 작성하다craco.config.js파일을 루트 디렉토리에 저장하고 CRACO를 설정합니다.

/* craco.config.js */
const path = require(`path`);

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@Components': path.resolve(__dirname, 'src/components'),
      '@So_on': path.resolve(__dirname, 'src/so_on'),
    }
  },
};

3. 기존 콜을 갱신하다react-scripts의 스크립트 섹션에서package.jsoncraco CLI 를 사용하는 파일:

/* package.json */

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test"
}

완료! 설치가 완료되었습니다.

이제 시험해 봅시다.

// Before
import Button from "./form/Button" 
import { Layout } from '../../Components/Layout'

// After
import Button from "@/form/Button"
import { Layout } from '@Components/Layout'

문서 Craco

감사합니다. :)

// Absolute path: paths which are relative to a specific path
import Input from 'components' // src/components
import UsersUtils from 'page/users/utils' // src/page/users/utils

// Alias path: other naming to specific path
import Input from '@components' // src/components
import UsersUtils from '@userUtils' // src/page/users/utils

웹 팩의 별칭이 작동하려면 기본값을 구성해야 합니다.webpack.config.js의create-react-app.

공식적인 방법은 대본을 사용하는 것입니다.그러나 권장되는 방법은 이젝트하지 않고 라이브러리를 사용하는 것입니다(가장 최신의 라이브러리를 찾습니다).

VSCode IntelliSense

또한 다음 항목을 추가해야 합니다.jsconfig.jsonVSCode의 IntelliSense 경로 파일(또는tsconfig.json)의 후속 질문을 참조해 주세요.

IntelliSense에서 사용할 수 있는 코드는 다음과 같습니다.

// NOTE THAT THOSE ARE ALIASES, NOT ABSOLUTE PATHS
// AutoComplete and redirection works
import {ColorBox} from '@atoms';
import {RECOIL_STATE} from '@state';

사용하는 경우:

// this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of this:
import MyUtilFn from '../../../../utils/MyUtilFn';

노드 모듈 플러그인을 사용하여 URL을 해결합니다.https://www.npmjs.com/package/babel-plugin-module-resolver설치 후 웹 팩/babel.rc 파일에 추가합니다.

순서 1

yarn add --dev babel-plugin-module-resolver

이 플러그인 추가

순서 2

에babel.config.js파일

ALIAS NAME    ALIAS PATH

@navigation   ./src/navigation
@components   ./src/components
@assets       ./assets

[
  "module-resolver",
  {
    root: ["./src"],
    alias: {
      "^~(.+)": "./src/\\1",
    },
    extensions: [
      ".ios.js",
      ".android.js",
      ".js",
      ".jsx",
      ".json",
      ".tsx",
      ".ts",
      ".native.js",
    ],
  },
];

순서 3

import example

import SomeComponent from '@components/SomeComponent.js';

스텝 4 서버 재시작

yarn start

참조 링크:React 네이티브 및 VSCode에서 가져오기 별칭을 사용하는 방법

언급URL : https://stackoverflow.com/questions/63067555/how-to-make-an-import-shortcut-alias-in-create-react-app