React Native에서 모듈 확인자를 사용하여 가져오기 정리

안녕하세요, 리액트 네이티브 커뮤니티입니다!

최근 인터뷰에서 제 면접관은 "Github에서 당신의 코드 중 일부를 훑어봤는데 괜찮아 보이지만 모듈 리졸버를 사용하지 않는 이유는 무엇입니까? 가져오기가 지저분해지지 않습니까?"라고 말했습니다.

"이게 말이 되네, 내가 왜 이걸 안하지?"라고 생각했던 기억이 납니다. 우연히 최근에 클라이언트를 위해 하고 있던 프로젝트에서 Babel 모듈 리졸버를 사용하기 시작했지만 내 포트폴리오 프로젝트는 사용하지 않았기 때문입니다.

다른 babel 플러그인이 필요한 이유는 무엇입니까?

따라서 모듈 리졸버의 아이디어는 구성 요소를 더 쉽게 가져올 수 있으므로 코드 가독성과 개발자 경험을 향상시키는 것입니다. 또한 빠르게 확장되는 프로젝트에 매우 좋습니다.

예를 들어 보겠습니다.

import Module from '../../../Module'

위의 내용은 다음과 같이 단순화할 수 있습니다.

import Module from 'components/Module'

// similarly

import Module from '@components/Module'

그리고 index.ts를 구성했다면 위에 체리와 같습니다.

import { Module } from '@components'

시작하기

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

# or if you use npm

npm install --save-dev babel-plugin-module-resolver 

플러그인을 설치한 후 babel.config.js(.babelrc를 사용할 수도 있음)를 업데이트하고 babel 플러그인 목록에 'module-resolver'를 추가해야 합니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@app/config': './app/config',
          '@app/context': './app/context',
          '@app/constants': './app/constants',
          '@app/layout': './app/layout',
          '@app/navigation': './app/navigation',
          '@app/screens': './app/screens',
          '@app/theme': './app/theme',
          '@app/utils': './app/utils'
        },
      },
    ],
  ],
};

루트는 프로젝트 기본 디렉터리를 지정합니다. 보통 '앱' 또는 'src'라고 합니다.

확장자를 사용하면 플러그인을 특정 파일 형식으로 제한할 수 있습니다.

별칭을 사용하면 모듈 가져오기에 대한 바로 가기가 필요한 모든 폴더를 지정할 수 있습니다.

위의 예는 내 프로젝트 중 하나에서 가져온 것입니다.
보시다시피 모든 유형의 폴더 구조에 대해 쉽게 구성할 수 있습니다.

새로운 프로젝트를 시작하고 폴더 구조가 좋은 깨끗한 상용구를 찾고 있다면 react-native-boilerplate을 확인할 수 있습니다.

이제 통합이 완료되었으므로 이제 자동 완성 및 IntelliSense도 작동하는지 확인하겠습니다.

참고: 여러 주요 IDE가 지원됩니다. 자세한 내용은 플러그인 저장소babel-plugin-module-resolver를 참조하십시오.

typescript로 작업하는 경우 tsconfig.json에 다음 필드를 추가합니다(typescript가 정말 멋지지 않나요?)

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "*": ["./app/*"],
      "@app/utils": ["./utils/*"],
      "@components": ["./components/*"]
    }
   ...
  }
}

또는 javascript를 사용하는 경우 jsconfig.json을 프로젝트에 추가하고 위의 필드를 추가하면 자동 완성이 가능합니다.

참고: 경로를 대괄호[] 안에 넣어야 합니다. 그렇지 않으면 TypeScript가 경로를 제대로 찾을 수 없습니다.

프로젝트 실행

플러그인을 설정한 후 이제 작동하는지 확인해야 합니다.
가져오기 변경을 시작하기 전에 다음을 수행해야 합니다.

Android 및 iOS용 빌드 폴더 정리

rm -rf ios/build android/app/build

npm 또는 yarn에 대한 캐시 재설정

yarn start -c

# or if you use npm

npm start --reset-cache

이제 프로젝트를 빌드하고 가져오기 변경을 시작할 수 있습니다.

참고: 여전히 캐시 문제가 발생하는 경우 babel.config.js 및 tsconfig.json을 다시 확인하고 아래 명령을 시도하여 watchman을 지우십시오.

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start --reset-cache

예제를 찾고 있다면 내 프로젝트 중 하나에서 이 항목commit을 확인하십시오.

이 기사가 통찰력이 있었고 코드 가독성과 귀하와 귀하의 팀 경험을 개선하는 데 도움이 되었기를 바랍니다.

통합 중에 문제가 발생했습니까? 언제든지 의견을 남기거나 를 통해 저에게 연락하십시오.

행복한 코딩! 🎉