react native universal monorepo
1.0.0
원사 작업 공간 Monorepo를 사용하여 React Native를 사용하여 여러 플랫폼을 지원하는 의견이 있습니다.
앱에서 여러 플랫폼을 지원할 계획이라면이 접근 방식을 시도하는 방법과 이유에 대한 심층적 인 가이드를 위해 React Native Everywhere 실행을 확인하십시오.
이 Monorepo는 원사 작업 공간과 TypeScript를 사용하여 모듈 식 React 기본 프로젝트를 지원합니다.
핵심 아이디어는 플랫폼 구성 (기본 코드 + Metro 및 Webpack과 같은 App Bundlers)에서 JavaScript 앱 코드를 분리하는 것입니다.
이 격리는 다른 작업 공간을 사용하여 발생합니다. JavaScript 앱 코드 용 app Workspace, React Native Mobile 구성을위한 mobile 작업 공간, React Native MacOS 구성을위한 macos 작업 공간 등이 있습니다.
우리는 Yarn nohoist 각 플랫폼에서 다른 버전의 React Native를 사용할 수 있도록 완전히 수용하여 (권장하지만 필요하지 않음) New React 기본 업데이트의 채택을 단순화합니다.
감사합니다 NoHoist, 각 플랫폼 작업 공간 ( mobile , macos 등)은 다른 플랫폼 작업 공간이 사용하는 버전에 관계없이 모든 React 기본 버전에 따라 다를 수 있습니다. 예를 들어, JavaScript 앱 코드가 두 버전을 지원하는 한 MACOS 앱에서 Mobile App 및 [email protected] 에서 [email protected] 사용할 수 있습니다.
이 접근법은 Lockstep의 업데이트를 통해 점진적인 반응 기본 업데이트를 촉진합니다.
자세한 내용은 "Running Running React Native Everywhere : Yarn Workspaces Monorepo 설정"을 확인하십시오.
켈 이것이 원시 모노 포도를 반응하는 올바른 방법이라고 말하는 것이 아닙니다. 이것은 내가 더 큰 코드베이스에서 사용하는 것을 좋아하는 접근법 일뿐입니다. :)
이 repo를 보일러 플레이트로 사용할 수 있고 필요하지 않은 플랫폼의 작업 공간을 제거하거나 작동 방식을 완전히 이해하려면이 설정을 처음부터 만들 수 있습니다.
[email protected]:mmazzarolo/react-native-universal-monorepo.git 복제하십시오cd react-native-universal-monorepo && yarn이 저장소 생성에 대한 단계별 자습서 : 처음부터 다음과 같습니다.
@thefinnomenon의 TV 및 Next.js 플랫폼 튜토리얼 :
추가 리소스 :
개발 및 구축 명령 :
yarn android:metro : Android/iOS 용 Metro Server를 시작하십시오yarn android:start : Android 앱 개발을 시작하십시오yarn android:studio : Android Studio에서 Android 앱 열기yarn ios:metro : Android/iOS 용 메트로 서버를 시작하십시오yarn ios:start : iOS 앱 개발 시작yarn ios:pods : iOS Cocoapods 종속성을 설치하십시오yarn ios:xcode : Xcode에서 iOS 앱을 엽니 다yarn macos:metro : MacOS 용 Metro 서버를 시작하십시오yarn macos:start : MacOS 앱 개발 시작yarn macos:pods : MacOS Cocoapods 종속성을 설치하십시오yarn macos:xcode : Xcode에서 MacOS 앱을 엽니 다yarn web:start : 웹 앱 개발 시작yarn web:build : 웹 앱의 생산 빌드 생성yarn electron:start : 전자 앱 개발 시작yarn electron:package:mac : MacOS 용 전자 앱의 생산 바이너리 패키지yarn electron:package:win : Windows 용 전자 앱의 생산 바이너리 패키지yarn electron:package:linux : Linux 용 Electron App의 생산 바이너리 패키지yarn browser-ext:start : 브라우저 확장을 시작합니다yarn browser-ext:build : 브라우저 확장의 생산 빌드 생성yarn windows:metro : Windows 용 Metro Server를 시작하십시오yarn windows:start : Windows 앱 개발 시작yarn tv:android:metro : Android TV 용 Metro Server 시작yarn tv:android:start : Android TV 앱 개발 시작yarn tv:android:studio : Android Studio에서 Android TV 앱을 엽니 다yarn tv:tvos:metro : TVOS 용 메트로 서버를 시작하십시오yarn tv:tvos:start : TVOS 앱 개발 시작yarn tv:tvos:xcode : Xcode에서 TVOS 앱을 엽니 다yarn tv:tvos:pods : TVOS Cocoapods 종속성을 설치하십시오yarn next:start : 다음에 시작하십시오 .JS 앱yarn next:build : Next.js 앱을 빌드하십시오yarn next:serve : Serv the Next.js 앱 빌드다른 명령 (우리는 Ultra-Runner를 사용하여 모든 작업 공간에서 이러한 명령을 실행합니다) :
yarn lint : 각 프로젝트를 보풀yarn lint:fix : Lint + 각 프로젝트를 수정하십시오yarn test : 각 프로젝트의 테스트를 실행하십시오yarn typecheck : 각 프로젝트에서 TypeScript 유형 확인 실행 Monorepo에서 React Native에서 작업하는 동안, 출처를 입을 때 여러 패키지가 올바르게 작동하지 않거나, 기본적으로 연결되어야하거나 두 번 번들로 연결되어 빌드 (예 : react , react-dom )가 필요하기 때문에 올바르게 작동하지 않을 것입니다.
이것은이 프로젝트 자체에 사용 된 접근 방식에 문제가되지 않습니다. 그것은 Monorepos의 일반적인 문제입니다.
이러한 문제를 해결하기 위해 문제를 NoHoist로 표시하므로 각 패키지에 의존하는 각 패키지에 설치됩니다.
이 Monorepo에서는 react-native-async-storage 에서 그러한 라이브러리의 예를 볼 수 있습니다.
Monorepo 전역에서 사용되는 Metro Bundler 및 Webpack Config는 구조 공구 세트를 사용하여 무사 패키지를 올바르게 해결할 수 있도록합니다.
따라서이 라이브러리를 nohoist 목록에 추가하는 한 가면 좋을까요?
우리는이 설정을 Yarn Classic과 호환하기 위해 노력하고 있습니다. 그러나 약간의 조정으로 Yarn 2+와도 호환됩니다 (모든 원사 2+ 이점 제공).
자세한 내용은 #22를 참조하십시오.
yarn set version berry 실행하십시오. .yarnrc.yml 파일을 만듭니다..yarnrc.yml 에 추가하여 node_modules 디렉토리가 모두 각 작업 공간에서 생성되도록하십시오. nodeLinker : node-modules
nmHoistingLimits : workspacesnmHositingLimits 각 작업 공간에 대한 종속성을 들어 올리는 방법을 알려줍니다. workspaces 으로 설정하면 루트 폴더에 들어오지 않고 각 작업 공간의 node_modules 에 모든 종속성이 설치됩니다. 이것은 이제 루트의 package.json 에서 noHoist 섹션을 안전하게 할 수 있음을 의미합니다.자세한 내용은 Yarn 2+의 "시작"가이드를 확인하십시오.
경우에 따라, 원사 클래식은 react-native 에 대한 peerDependency 을 가진 올바르게 의존성을 해결할 수 없습니다.
몇 가지 해결 방법은 #22를 참조하십시오. react-native-monorepo-tools Repo에 대한 수정이 작업 중입니다.
기고, 토론 및 피드백을 환영합니다! 새 PR을 제출하기 전에 기능 변경에 대한 적극적인 계획이 있는지 물어보십시오.
