React/React Native( @app )용 정적 디렉토리 설정 방법

때때로 당신은 상대 디렉토리가 수천 개의 path 문자로 당신을 압박한다는 것을 알게 될 것입니다. 이 게시물은 당신을위한 것입니다

import SomeThing from "../../../../../../../../components/Something";

첫 번째 . 당신은 어떤 패키지가 필요합니다

yarn add -D babel-plugin-module-resolver

그 다음에 . .bablerc( 또는 babel.config.js )

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [   // this plugins part 
      [
        'module-resolver',
        {
          alias: {
            '@app': '.' // if app files is inside "app/" folder, replace with "./app"
          }
        }
      ]
    ]
  };
};

팁: 아마도 일부 템플릿 프로젝트에서 이 파일을 복사할 때 현재 기본 파일을 대체하지 않고 babel copy.config.js가 되어 작동하지 않을 수 있습니다. 이것을 다시 확인하십시오.

좋아, 당신은 클린 실행을 할 수 있고 이것은 작동합니다.

확인 . 이제 실제로 작동할 수 있습니다. 하지만 . file 의 디렉터리로 리디렉션하는 데 도움이 되는 VS Code가 필요한 경우. 당신은 그 두 가지가 필요합니다.

.vscode/setting.json

{
  "path-autocomplete.pathMappings": {
    "@app": "${workspace}" // alias similar to defined in .babelrc
  }
}

jsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "module": "es6",
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@app/*" : ["./*"] // alias similar to defined in .babelrc
        },
        "sourceMap": true,
        "target": "ES6"
    },
    "exclude": [
        "node_modules"
    ]
}

작동해야합니다

마지막으로 한 가지. 지하철에서 디렉토리를 찾지 못한 경우. 깨끗한 시작을 수행해야 합니다.

expo start -c // expo 
npx react-native start --reset-cache // react native base