หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ตอบโต้โมเรปโปสากลพื้นเมือง

วิธีการที่เห็นได้ชัดในการสนับสนุนหลายแพลตฟอร์มด้วย React Native โดยใช้ Monorepo Workspaces Monorepo

ตรวจสอบ Running React Native ทุกที่ สำหรับคู่มือเชิงลึกเกี่ยวกับวิธีการและเหตุผลที่ฉันแนะนำให้ลองใช้วิธีนี้หากคุณวางแผนที่จะสนับสนุนหลายแพลตฟอร์มในแอปของคุณ

  • ภาพรวม
  • การตั้งค่า MonorePace ของเส้นด้าย
  • Android & iOS
  • Windows & MacOS
  • เว็บ
  • ส่วนขยายเบราว์เซอร์และอิเล็กตรอน

ภาพรวม

monorepo นี้ใช้พื้นที่ทำงานของเส้นด้ายและ typescript เพื่อรองรับโครงการ Native Native แบบแยกส่วน

แนวคิดหลักคือการแยกรหัสแอพ JavaScript ออกจากการกำหนดค่าแพลตฟอร์ม (รหัสดั้งเดิม + แอพ Bundlers เช่น Metro และ Webpack)
การแยกนี้เกิดขึ้นโดยการใช้พื้นที่ทำงานที่แตกต่างกัน: เรามี app ร์กสเปซสำหรับรหัสแอพ JavaScript ซึ่งเป็นพื้นที่ทำงาน mobile สำหรับการกำหนดค่ามือถือ React Native, macos Workspace สำหรับการกำหนดค่า MacOS แบบดั้งเดิมและอื่น ๆ

เรายอมรับ nohoist เส้นด้ายอย่างเต็มที่เพื่อให้ใช้ React Native เวอร์ชันต่าง ๆ ในแต่ละแพลตฟอร์ม (ซึ่งแนะนำ แต่ไม่จำเป็น) ทำให้การใช้การอัปเดตแบบดั้งเดิมของ React ใหม่ง่ายขึ้น
ขอบคุณ Nohoist, เวิร์กสเปซแต่ละแพลตฟอร์ม ( mobile , macos , ฯลฯ ) สามารถขึ้นอยู่กับเวอร์ชันดั้งเดิมที่ตอบสนองไม่ว่าพื้นที่ทำงานของแพลตฟอร์มอื่น ๆ จะใช้เวอร์ชันใด ตัวอย่างเช่นเราสามารถใช้ [email protected] บนแอพมือถือและ [email protected] บนแอพ MacOS-ตราบใดที่รหัสแอพ JavaScript รองรับทั้งสองเวอร์ชัน
วิธีการนี้ส่งเสริมการอัปเดต Native Native แบบค่อยเป็นค่อยไปเกี่ยวกับการอัปเดตใน LockStep

สำหรับรายละเอียดเพิ่มเติมลองดู "Running React Native ทุกที่: การตั้งค่า Monorepo Workspaces"

โปรดสังเกตว่าฉันไม่ได้บอกว่านี่เป็นวิธี ที่ถูกต้อง ในการทำปฏิกิริยา monorepos พื้นเมือง นี่เป็นเพียงวิธีการที่ฉันสนุกกับการใช้รหัสฐานขนาดใหญ่ :)

แพลตฟอร์มที่รองรับ

  • Android (React Native 0.65)
  • iOS (React Native 0.65)
  • Windows (React Native 0.65)
  • MacOS (React Native 0.63)
  • Android TV (React Native 0.65)
  • TVOS (React Native 0.65)
  • เว็บ (React Native 0.65)
  • เว็บ - ส่วนขยายเบราว์เซอร์ (React Native 0.65)
  • เว็บ - อิเล็กตรอน (React Native 0.65)
  • Web - Next.js (React Native 0.65)

เริ่มต้น

คุณสามารถใช้ repo นี้เป็นแผ่นหม้อไอน้ำลบพื้นที่ทำงานของแพลตฟอร์มที่คุณไม่ต้องการหรือคุณสามารถสร้างการตั้งค่านี้ตั้งแต่เริ่มต้นหากคุณต้องการเข้าใจวิธีการทำงานอย่างเต็มที่

การใช้ที่เก็บนี้เป็นแผ่นหม้อไอน้ำ

  1. โคลนที่เก็บ: [email protected]:mmazzarolo/react-native-universal-monorepo.git
  2. เรียกใช้เส้นด้ายติดตั้ง cd react-native-universal-monorepo && yarn

สร้างการตั้งค่านี้ตั้งแต่เริ่มต้น

ทีละขั้นตอนการสอนเกี่ยวกับการสร้างที่เก็บนี้ตั้งแต่เริ่มต้น:

  • ภาพรวม
  • การตั้งค่า MonorePace ของเส้นด้าย
  • Android & iOS
  • Windows & MacOS
  • เว็บ
  • ส่วนขยายเบราว์เซอร์และอิเล็กตรอน

การสอนสำหรับทีวีและแพลตฟอร์ม next.js จาก @thefinnomenon:

  • การเพิ่ม TVOS & Android TV Support ให้กับ Monorepo
  • next.js ใน monorepo แบบตอบโต้

แหล่งข้อมูลเพิ่มเติม:

  • เรียกใช้แอพ React Native ของคุณบนเว็บด้วย React Native สำหรับเว็บ
  • การสร้างแอปพลิเคชันเดสก์ท็อปโดยใช้อิเล็กตรอนและสร้างแอป React
  • การพัฒนาส่วนขยายของเบราว์เซอร์ด้วยแอป Create React

คำสั่งที่มีอยู่

การพัฒนาและสร้างคำสั่ง:

  • yarn android:metro : เริ่มเซิร์ฟเวอร์ Metro สำหรับ Android/iOS
  • yarn android:start : เริ่มพัฒนาแอพ Android
  • yarn android:studio : เปิดแอพ Android บน Android Studio
  • yarn ios:metro : เริ่มเซิร์ฟเวอร์ Metro สำหรับ Android/iOS
  • yarn ios:start : เริ่มพัฒนาแอพ iOS
  • yarn ios:pods : ติดตั้ง iOS cocoapods การพึ่งพา
  • yarn ios:xcode : เปิดแอพ iOS บน xcode
  • yarn macos:metro : เริ่ม Metro Server สำหรับ MacOS
  • yarn macos:start : เริ่มพัฒนาแอพ MacOS
  • yarn macos:pods : ติดตั้ง macOS cocoapods การพึ่งพา
  • yarn macos:xcode : เปิดแอพ MacOS บน xcode
  • yarn web:start : เริ่มพัฒนาเว็บแอป
  • yarn web:build : สร้างงานสร้างการผลิตของเว็บแอป
  • yarn electron:start : เริ่มพัฒนาแอพอิเล็กตรอน
  • yarn electron:package:mac : แพ็คเกจการผลิตไบนารีของแอพอิเล็กตรอนสำหรับ macOS
  • yarn electron:package:win : แพ็คเกจการผลิตไบนารีของแอพอิเล็กตรอนสำหรับ Windows
  • yarn electron:package:linux : แพ็คเกจการผลิตไบนารีของแอพอิเล็กตรอนสำหรับ Linux
  • yarn browser-ext:start : เริ่มพัฒนาส่วนขยายเบราว์เซอร์
  • yarn browser-ext:build : สร้างงานสร้างการผลิตของส่วนขยายเบราว์เซอร์
  • yarn windows:metro : เริ่ม Metro Server สำหรับ Windows
  • yarn windows:start : เริ่มพัฒนาแอพ Windows
  • yarn tv:android:metro : เริ่มเซิร์ฟเวอร์ Metro สำหรับ Android TV
  • yarn tv:android:start : เริ่มพัฒนาแอพ Android TV
  • yarn tv:android:studio : เปิดแอพ Android TV ใน Android Studio
  • yarn tv:tvos:metro : เริ่ม Metro Server สำหรับ TVOS
  • yarn tv:tvos:start : เริ่มพัฒนาแอพ TVOS
  • yarn tv:tvos:xcode : เปิดแอพ TVOS ใน XCode
  • yarn tv:tvos:pods : ติดตั้ง tvos cocoapods การพึ่งพา
  • yarn next:start : เริ่มแอป next.js
  • yarn next:build : สร้างแอป next.js
  • yarn next:serve : เสิร์ฟแอปถัดไป

คำสั่งอื่น ๆ (เราใช้นักวิ่งพิเศษเพื่อเรียกใช้คำสั่งเหล่านี้ในพื้นที่ทำงานทั้งหมด):

  • yarn lint : ผ้าสำลีแต่ละโครงการ
  • yarn lint:fix : Lint + Fix แต่ละโครงการ
  • yarn test : เรียกใช้การทดสอบของแต่ละโครงการ
  • yarn typecheck : เรียกใช้การตรวจสอบประเภท TypeScript ในแต่ละโครงการ

การพึ่งพาอาศัย

ในขณะที่ทำงานเกี่ยวกับ React Native ใน monorepo คุณจะสังเกตเห็นว่าแพ็คเกจหลายอย่างจะไม่ทำงานอย่างถูกต้องเมื่อยก-เพราะพวกเขาจำเป็นต้องเชื่อมโยงกันอย่างสม่ำเสมอหรือเพราะพวกเขาถูกรวมเข้าด้วยกันสองครั้งทำลายการสร้าง (เช่น react , react-dom )
นี่ไม่ใช่ปัญหากับวิธีการที่ใช้ในโครงการนี้ต่อ se มันเป็นปัญหาที่พบบ่อยมากขึ้นกับ monorepos

เพื่อแก้ไขปัญหาเหล่านี้เราทำเครื่องหมายว่าเป็น nohoist ดังนั้นพวกเขาจะถูกติดตั้งในแต่ละแพ็คเกจที่ขึ้นอยู่กับพวกเขา

ใน monorepo นี้คุณสามารถดูตัวอย่างของห้องสมุดดังกล่าวใน react-native-async-storage

ใน Metro Bundler และ Webpack Configs ที่ใช้ข้าม Monorepo เราใช้ชุดเครื่องมือสร้างเพื่อให้แน่ใจว่าแพ็คเกจ NoHoisted ได้รับการแก้ไขอย่างถูกต้อง
ดังนั้นตราบใดที่คุณเพิ่มไลบรารีเหล่านี้ในรายการ nohoist คุณควรจะไปได้ดี?

เส้นด้ายคลาสสิกกับเส้นด้าย 2+

เราพยายามที่จะทำให้การตั้งค่านี้เข้ากันได้กับเส้นด้ายคลาสสิก - แต่ด้วยการปรับแต่งสองสามครั้งมันเข้ากันได้กับเส้นด้าย 2+ เช่นกัน (ให้ประโยชน์ทั้งหมดของเส้นด้าย 2+)
ดู #22 สำหรับข้อมูลเพิ่มเติม

การตั้งค่าเส้นด้าย 2+

  1. เรียกใช้ yarn set version berry ที่รูทของโครงการ มันจะสร้างไฟล์. .yarnrc.yml
  2. เพิ่มบรรทัดต่อไปนี้ลงใน .yarnrc.yml เพื่อให้แน่ใจว่าไดเรกทอรี node_modules ทั้งหมดถูกสร้างขึ้นในแต่ละพื้นที่ทำงาน: 
 nodeLinker : node-modules
nmHoistingLimits : workspaces
  1. nmHositingLimits บอกวิธีการยกการพึ่งพาสำหรับแต่ละพื้นที่ทำงาน โดยการตั้งค่าให้กับ workspaces การพึ่งพาทั้งหมดจะถูกติดตั้งใน node_modules ของแต่ละเวิร์กสเปซมากกว่าที่จะถูกยกไปยังโฟลเดอร์รูท ซึ่งหมายความว่าตอนนี้คุณสามารถสามารถส่วน noHoist ใน package.json ของรูทได้อย่างปลอดภัย

ตรวจสอบคู่มือ "การเริ่มต้น" ของเส้นด้าย 2+สำหรับข้อมูลเพิ่มเติม

ปัญหาที่รู้จัก

ในบางกรณีเส้นด้ายคลาสสิกจะไม่สามารถแก้ไขการพึ่งพาได้อย่างถูกต้องซึ่งมี peerDependency react-native
ดู #22 สำหรับวิธีแก้ปัญหาสองสามข้อ การแก้ไข repo react-native-monorepo-tools repo กำลังทำงานอยู่

การบริจาค

ยินดีต้อนรับการมีส่วนร่วมการสนทนาและข้อเสนอแนะ! โปรดถามว่ามีแผนการเปลี่ยนแปลงคุณสมบัติใด ๆ ก่อนที่จะส่ง PRS ใหม่หรือไม่?

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด