core 웹 프로젝트와 React 모바일 프로젝트 간에 npmReact Native 패키지를 연결하는 방법은 무엇입니까?

이 기사에서는 실을 패키지 관리자로 사용하겠습니다. pnpm 또는 심지어 npm 로 이 작업을 수행할 수 있지만 테스트하지는 않았습니다.

로컬에서 패키지를 공유하는 이유는 무엇입니까?

많은 하위 프로젝트를 포함하는 프로젝트를 작업할 때 API와 프런트 또는 모바일 간에 코드를 공유하고 싶을 것입니다.

코드 중복을 최소화하기 위한 첫 번째 솔루션은 예를 들어 core 라는 추가 패키지를 만들어 각 프로젝트 간에 공유 종속성으로 로컬에서 공유하는 것입니다.

모든 프로젝트는 package.json 파일에 이 종속성을 포함합니다.

"dependencies": {
   "core": "*"
}

단점은 핵심 패키지를 게시하여 설치해야 하고 로컬 개발 및 CI 논리가 훨씬 복잡하다는 것입니다.

원사 링크

이 문제를 해결하는 간단한 해결책은 yarn link를 사용하여 패키지 사이에 로컬로 심볼릭 링크를 만드는 것입니다.

cd core
yarn link
yarn build

cd web
yarn link core

cd server
yarn link core

이제 server 및 web는 core 빌드의 로컬 버전을 사용합니다.

네이티브 반응

이제 React Native 모바일 애플리케이션을 추가하여 프로젝트를 더욱 복잡하게 만들 것입니다. 우리는 Expo 으로 프로젝트를 생성하도록 선택했습니다.

이 경우 문제는 심볼릭 링크가 작동하지 않는다는 것입니다. 당신의 앱은 당신에게 좋은 충돌을 줄 것입니다.

우리는 이 모든 프로젝트 간에 코드를 올바르게 공유하는 데 성공하는 방법을 함께 볼 것입니다.

모노레포

패키지를 로컬에서 함께 연결하는 것은 좋지만 프로젝트에서 많은 패키지를 추가하면 설정하기가 번거로울 수 있습니다.

오늘날 가장 많이 사용되는 솔루션 중 하나는 모노레포를 거치는 것입니다. 간단히 말해서 모든 코드를 중앙 집중화할 저장소입니다. 이는 모든 프로젝트가 동시에 배포를 따르기 때문에 코드 구성 및 버전 관리를 단순화합니다.

원사 작업 공간

여전히 원사를 사용하고 있습니다. 이제 단일 저장소에 프로젝트가 있으므로 yarn workspace 인 단일 저장소에 매우 유용한 구성을 사용할 것입니다.

간단히 말해서, 각 프로젝트에 대해 원사 설치를 수행하는 대신 모노 리포지토리의 루트에서 한 번만 수행하면 원사가 모든 node_modules을 루트에 설치합니다.

터보레포

모노 레포를 설정하기 위해 기본 매개 변수 설치를 처리하는 Turborepo을 사용할 것입니다.

완전한 기사의 주제가 될 수 있고 문서가 매우 훌륭하기 때문에 이 구성에 대해서는 설명하지 않겠습니다.

npx create-turbo@latest

우리의 모노레포

갑시다!
이제 웹 및 모바일 프로젝트를 만들어 보겠습니다.

cd apps
yarn create react-app web
...

npx create-expo-app mobile

이제 핵심 패키지를 만듭니다.

cd packages
mkdir core
yarn init
...

종속성 재사용 가능 노드 패키지를 만드는 방법을 모르는 경우 이에 대해 읽을 수 있습니다.

웹과 모바일의 종속성을 추가해야 합니다.

"dependencies": {
   "core": "*"
}

메트로 구성

목표에 가까워지고 있습니다.
이미 빌드core하고 실행할 수 있습니다web.
mobile 의 경우 여전히 작동하지 않지만 걱정하지 마십시오. 거의 다 왔습니다.

이제 core 빌드가 프로젝트의 root에 있습니다. metro에게 폴더가 아니라 루트에 있는 node_module를 가져오라고 지시하십시오.

먼저 main의 package.json 속성을 수정합니다.

"main": "index.js"

이제 index.js 파일을 생성합니다.

import { registerRootComponent } from 'expo';

import App from './App';
registerRootComponent(App);

마지막으로 metro 파일을 사용하여 monorepo에 대한 metro.config.js 구성을 생성합니다.

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

const projectRoot = __dirname;
const workspaceRoot = path.resolve(projectRoot, '../..');

const config = getDefaultConfig(projectRoot);

config.watchFolders = [workspaceRoot];
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
];
config.resolver.disableHierarchicalLookup = true;

module.exports = config;

이제 핵심 빌드를 재시도하고 모바일을 실행하여 개발을 시작할 수 있습니다.

이 기사의 예는 here 에서 찾을 수 있습니다.