ในบทความนี้ ฉันจะไม่เปรียบเทียบ monorepo และ polyrepo เพราะมันเป็นเรื่องของปรัชญา แทนที่จะเปรียบเทียบ ฉันจะเน้นที่ประสบการณ์การสร้างและพัฒนาและถือว่าคุณคุ้นเคยกับระบบนิเวศของ JS/TS แล้ว
ฉันมักจะมีความฝันเกี่ยวกับ monorepo
ฉันได้เห็นแนวทาง monorepo ในขณะทำงานให้กับ Airbnb แต่เป็นเพียงสำหรับ frontend เท่านั้น ด้วยความรักที่ลึกซึ้งต่อระบบนิเวศของ JavaScript และประสบการณ์การพัฒนา TypeScript ที่ "แฮปปี้" ฉันเริ่มที่จะจัดโค้ด frontend และ backend ในภาษาเดียวกันตั้งแต่ประมาณสามปีที่แล้ว มันเยี่ยมมาก (สำหรับการจ้างงาน) แต่มันก็ไม่ดีนักสำหรับการพัฒนาเพราะโปรเจ็กต์ของเรายังคงกระจัดกระจายอยู่ในหลาย repos.
ดังที่คำกล่าวว่า “วิธีที่ดีที่สุดในการปรับปรุงโครงสร้างโปรเจ็กต์คือการเริ่มต้นใหม่” ดังนั้นเมื่อฉันเริ่มต้นธุรกิจ startups ประมาณหนึ่งปีที่แล้ว ฉันตัดสินใจที่จะใช้กลยุทธ์ total monorepo: ใส่โปรเจ็กต์ frontend และ backend แม้กระทั่งสคีมาฐานข้อมูลเข้าใน repo เดียว
ในบทความนี้ ฉันจะไม่เปรียบเทียบ monorepo และ polyrepo เพราะมันเป็นเรื่องของปรัชญา แทนที่จะเปรียบเทียบ ฉันจะเน้นที่ประสบการณ์การสร้างและพัฒนาและถือว่าคุณคุ้นเคยกับระบบนิเวศของ JS/TS แล้ว
ผลลัพธ์สุดท้ายสามารถดูได้ที่ GitHub.
พูดตามตรง ฉันเป็นแฟนของ JavaScript และ TypeScript ฉันรักความเข้ากันได้ของความยืดหยุ่นและความเข้มข้นของมัน: คุณสามารถกลับไปใช้ unknown หรือ any (แม้ว่าเราจะแบนฟอร์มของ any ทุกรูปแบบในฐานข้อมูลโค้ดของเรา) หรือใช้ชุดกฎ lint ที่เข้มงวดมากเพื่อจัดโค้ดสไตล์ให้ตรงกันในทีม
เมื่อเรากำลังพูดคุยเกี่ยวกับแนวคิดของ “fullstack” ก่อนหน้านี้ เรามักจะจินตนาการถึงอย่างน้อยสองระบบนิเวศและภาษาการเขียนโปรแกรม: หนึ่งสำหรับ frontend และหนึ่งสำหรับ backend
วันหนึ่ง ฉันได้ตระหนักว่าอาจจะง่ายขึ้น: Node.js เร็วพอ (เชื่อฉันเถอะ ในกรณีส่วนใหญ่ คุณภาพของโค้ดสำคัญกว่าความเร็วในการทำงาน) TypeScript ก็โตพอ (ทำงานได้ดีในโปรเจ็กต์ frontend ขนาดใหญ่) และแนวคิด monorepo ก็ได้รับการฝึกฝนจากทีมน้อยชื่อไม่กี่ทีม (React, Babel, เป็นต้น) - ดังนั้นทำไมเราไม่นำโค้ดทั้งหมดมารวมกัน ตั้งแต่ frontend ไปจนถึง backend? นี่สามารถทำให้นักพัฒนาทำงานได้โดยไม่ต้องเปลี่ยนบริบทใน repo หนึ่งและทำ feature ที่สมบูรณ์ใน (เกือบ) ภาษาหนึ่งเดียว
ในฐานะนักพัฒนาและอย่างที่เคย ฉันอดใจไม่ไหวที่จะเริ่ม coding แต่ครั้งนี้สิ่งต่าง ๆ เป็นอย่างต่างไป
การเลือกตัวจัดการแพ็คเกจเป็นสิ่งสำคัญต่อประสบการณ์การพัฒนาใน monorepo
มันคือกรกฎาคม 2021 ฉันเริ่มด้วย [email protected] เพราะฉันได้ใช้มันมานานแล้ว Yarn เร็ว แต่ไม่นานฉันก็พบปัญหาหลายอย่างกับ Yarn Workspaces เช่น ไม่ยกเลิกการขึ้นทะเบียนที่ถูกต้อง และได้รับการติดแท็กมากมายว่า "แก้ไขในเวอร์ชันใหม่" ซึ่งพาฉันไปยัง v2 (berry).
“โอเค งั้นฉันจะอัพเกรดเดี๋ยวนี้” ฉันหยุดฝืนกับ v1 และเริ่มที่จะแปลง แต่คู่มือการโยกย้ายที่ยาวของเบอร์รี่ทำให้ฉันกลัว และฉันยอมแพ้หลังจากความพยายามล้มเหลวหลายครั้ง
ดังนั้นการวิจัยเกี่ยวกับตัวจัดการแพ็คเกจก็เริ่มขึ้น ฉันหลงไหลใน pnpm หลังจากทดลอง: เร็วเท่า yarn, การสนับสนุน native monorepo, คำสั่งที่คล้ายกับ npm, hard links, เป็นต้น สิ่งสำคัญที่สุดคือมันเพียงแค่ทำงาน ในฐานะนักพัฒนาที่ต้องการเริ่มต้นด้วยผลิตภัณฑ์แต่ไม่ใช่พัฒนาตัวจัดการแพ็คเกจ ฉันแค่ต้องการเพิ่ม dependencies บางส่วนและเริ่มโปรเจ็กต์โดยไม่ต้องรู้ว่าตัวจัดการแพ็คเกจทำงานอย่างไรหรือมีแนวคิดที่แฟนซีใด ๆ
บนพื้นฐานของแนวคิดเดียวกัน เราเลือก lerna ซึ่งเป็นเพื่อนเก่า สำหรับการเรียกใช้งานคำสั่งระหว่างแพ็คเกจและการเผยแพร่แพ็คเกจของ workspace
มันยากที่จะคิดถึงขอบเขตสุดท้ายของแต่ละแพ็คเกจในตอนแรก เริ่มต้นด้วยความพยายามที่ดีที่สุดของคุณตามสถานการณ์ปัจจุบันและจำไว้เสมอว่าคุณสามารถปรับปรุงใหม่ในระหว่างการพัฒนาได้
โครงสร้างเริ่มต้นของเรา ประกอบด้วยสี่แพ็คเกจ:
core: การบริการ backend monolith.phrases: คีย์ i18n → แหล่งที่มา phrases.schemas: สคีมาฐานข้อมูลและ TypeScript schemas แบ่งปัน.ui: web SPA ที่โต้ตอบกับ core.เนื่องจากเรายอมรับระบบนิเวศ JavaScript และใช้ TypeScript เป็นภาษาการเขียนโปรแกรมหลักของเรา จึงมีหลายตัวเลือกที่ชัดเจน (สมตามรสนิยมของฉัน 😊):
koajs สำหรับบริการ backend (core): ฉันมีประสบการณ์ที่ยากลำบากในการใช้ async/await ใน express ดังนั้นฉันตัดสินใจใช้สิ่งที่มีการสนับสนุน native.i18next/react-i18next สำหรับ i18n (phrases/ui): ชอบความเรียบง่ายของ APIs และการสนับสนุน TypeScript ที่ดี.react สำหรับ SPA (ui): เป็นรสนิยมส่วนตัว.บางสิ่งยังขาดหายไปที่นี่: ระบบฐานข้อมูลและการแมปสคีมา <-> บน TypeScript definition.
ในตอนนั้น ฉันได้ลองวิธีที่นิยมสองแนวทาง:
แต่ทั้งคู่ให้ความรู้สึกแปลก ๆ ในระหว่างการพัฒนาก่อนหน้านี้:
.raw() สำหรับ queries ต้นแบบในหลายสถานการณ์.แล้วฉันเห็นบทความนี้: “หยุดใช้ Knex.js: การใช้ SQL query builder เป็นรูปแบบที่ยึดติดกับทางที่ผิด”. ชื่อดูน่ารุกราน แต่เนื้อหายอดเยี่ยมมาก มันเตือนฉันอย่างแรงว่า “SQL 是一种编程语言” และฉันได้ตระหนักว่าฉันสามารถเขียน SQL โดยตรง (เหมือนกับ CSS, ฉันจะพลาดสิ่งนี้ได้อย่างไร!) เพื่อใช้ประโยชน์จากคุณลักษณะของภาษาพื้นเมืองและฐานข้อมูลแทนที่จะเพิ่มอีกหนึ่งชั้นและลดพลังลง
โดยสรุป ฉันตัดสินใจที่จะติดกับ Postgres และ Slonik (ตัว Progres client ที่โอเพนซอร์ส) ตามที่บทความระบุ:
…ประโยชน์ของการอนุญาตให้ผู้ใช้เลือก ระหว่าง dialects ของฐานข้อมูลต่าง ๆ นั้นมีน้อยและการพัฒนาเหนือหัวของการพัฒนาสำหรับฐานข้อมูลหลายๆ ฐานพร้อมกัน เป็นที่มีนัยสำคัญ.
ข้อดีอีกประการหนึ่งของการเขียน SQL คือเราสามารถใช้งานมันได้ง่าย ๆ เป็นแหล่งข้อมูลเดียวของ definitions ของ TypeScript ฉันได้เขียน ตัวสร้างโค้ด เพื่อ transcompile สคีมา SQL เป็นโค้ด TypeScript ที่เราจะใช้ใน backend ของเราและผลลัพธ์ดูไม่เลว:
เราสามารถเชื่อม jsonb กับ type TypeScript และดำเนินการตรวจสอบตาม type validation ในบริการ backend ถ้าจำเป็น
โครงสร้าง related dependency สุดท้ายดูเหมือน:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'%3e%3cg data-look='classic' id='Monorepo' class='cluster'%3e%3crect height='208' width='369.40234375' y='112' x='8' style=''/%3e%3cg transform='translate(156.677734375%2c 112)' class='cluster-label'%3e%3cforeignObject height='24' width='72.046875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eMonorepo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_database_Schemas_0' d='M279.051%2c62L279.051%2c66.167C279.051%2c70.333%2c279.051%2c78.667%2c279.051%2c87C279.051%2c95.333%2c279.051%2c103.667%2c279.051%2c111.333C279.051%2c119%2c279.051%2c126%2c279.051%2c129.5L279.051%2c133'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Phrases_Core_1' d='M84.97%2c191L81.671%2c195.167C78.372%2c199.333%2c71.774%2c207.667%2c70.63%2c215.428C69.486%2c223.19%2c73.796%2c230.379%2c75.951%2c233.974L78.106%2c237.569'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Phrases_UI_2' d='M157.766%2c191L165.701%2c195.167C173.635%2c199.333%2c189.505%2c207.667%2c204.928%2c216.342C220.35%2c225.018%2c235.325%2c234.036%2c242.812%2c238.544L250.3%2c243.053'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Schemas_Core_3' d='M229.022%2c191L221.302%2c195.167C213.581%2c199.333%2c198.14%2c207.667%2c184.072%2c215.656C170.003%2c223.646%2c157.307%2c231.291%2c150.959%2c235.114L144.611%2c238.937'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Schemas_UI_4' d='M299.392%2c191L302.531%2c195.167C305.67%2c199.333%2c311.948%2c207.667%2c313.267%2c215.406C314.585%2c223.145%2c310.944%2c230.291%2c309.123%2c233.863L307.302%2c237.436'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(279.05078125%2c 35)' id='flowchart-database-0' class='node default'%3e%3crect height='54' width='196.078125' y='-27' x='-98.0390625' style='' class='basic label-container'/%3e%3cg transform='translate(-68.0390625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='136.078125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3ePostgres Database%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(279.05078125%2c 164)' id='flowchart-Schemas-1' class='node default'%3e%3crect height='54' width='126.703125' y='-27' x='-63.3515625' style='' class='basic label-container'/%3e%3cg transform='translate(-33.3515625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='66.703125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eSchemas%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(106.34765625%2c 164)' id='flowchart-Phrases-2' class='node default'%3e%3crect height='54' width='118.703125' y='-27' x='-59.3515625' style='' class='basic label-container'/%3e%3cg transform='translate(-29.3515625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='58.703125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3ePhrases%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(96.34765625%2c 268)' id='flowchart-Core-3' class='node default'%3e%3crect height='54' width='94.6875' y='-27' x='-47.34375' style='' class='basic label-container'/%3e%3cg transform='translate(-17.34375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='34.6875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eCore%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(291.7265625%2c 268)' id='flowchart-UI-5' class='node default'%3e%3crect height='54' width='76' y='-27' x='-38' style='' class='basic label-container'/%3e%3cg transform='translate(-8%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='16'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eUI%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
คุณอาจสังเกตว่ามันเป็นแผนภาพแบบทิศทางเดียว ซึ่งช่วยเรามากในการรักษาสถาปัตยกรรมที่ชัดเจนและความสามารถในการขยายเมื่อโปรเจ็กต์เติบโตขึ้น บวกกับโค้ดทั้งหมด (พื้นฐาน) ในภาษา TypeScript
pnpm และ lerna ทำงานได้ยอดเยี่ยมในการพึ่งพาหน่วยงานของ workspace ภายใน เราใช้คำสั่งด้านล่างใน root โปรเจ็กต์เพื่อเพิ่มแพ็คเกจพี่น้อง:
มันจะเพิ่ม @logto/schemas เป็น dependency ใน @logto/core ขณะที่รักษารุ่นเชิงความหมายใน package.json ของ dependencies ภายในของคุณ pnpm ยังสามารถเชื่อมโยงพวกเขาอย่างถูกต้องใน pnpm-lock.yaml ผลลัพธ์จะดูประมาณนี้:
เราปฏิบัติต่อแพ็คเกจทุกชิ้นใน monorepo ว่าเป็น “อิสระ” ดังนั้นเราสามารถใช้วิธีการมาตรฐานสำหรับการแชร์การตั้งค่า ซึ่งครอบคลุม tsconfig, eslintConfig, prettier, stlyelint และ jest-config ดู โปรเจ็กต์นี้ เป็นตัวอย่าง
ฉันใช้ VSCode สำหรับการพัฒนาประจำวันที่กำหนดอย่างสั้น ๆ ว่าไม่มีอะไรแตกต่างเมื่อโปรเจ็กต์ถูกตั้งค่าอย่างถูกต้อง:
pattern ด้วยของคุณเอง):เรากำลังใช้คอมไพเลอร์ต่างกันสำหรับ frontend และ backend: parceljs สำหรับ UI (React) และ tsc สำหรับแพ็คเกจ TypeScript ล้วน ๆ อื่น ๆ ฉันแนะนำอย่างยิ่งให้คุณลอง parceljs หากคุณยังไม่ได้ มันคือคอมไพเลอร์ “ไม่มีการตั้งค่า” จริง ๆ ที่จัดการไฟล์ประเภทต่าง ๆ อย่างยอดเยี่ยม
Parcel โฮสต์เซิร์ฟเวอร์ dev frontend ของตัวเอง และผลลัพธ์ผลิตภัณฑ์คือไฟล์สถิติเพียงอย่างเดียว เนื่องจากเราต้องการเมาท์ APIs และ SPA ใต้ต้นกำเนิดเดียวกันเพื่อหลีกเลี่ยง problem CORS กลยุทธ์ด้านล่างทำงาน:
คุณสามารถหาการดำเนินฟังก์ชั่น middleware frontend ที่นี่.
เรามีสคริปต์ dev ใน package.json สำหรับแต่ละแพ็คเกจที่เฝ้าดูการเปลี่ยนแปลงของไฟล์และคอมไพล์ใหม่เมื่อจำเป็น ขอบคุณ lerna ที่ทำให้สิ่งต่าง ๆ กลายเป็นเรื่องง่ายโดยใช้ lerna exec เพื่อเรียกใช้สคริปต์แพ็คเกจอย่างขนานกัน สคริปต์ root จะดูแบบนี้:
ในอุดมคติมีเพียงสองขั้นตอนสำหรับวิศวกร/ผู้มีส่วนร่วมรายใหม่ในการเริ่มต้น:
pnpm i && pnpm devทีมของเราได้พัฒนาภายใต้แนวทางนี้เป็นเวลาหนึ่งปีแล้วและเรารู้สึกพอใจกับมัน ไปที่ GitHub repo ของเรา เพื่อดูรูปร่างล่าสุดของโปรเจ็กต์ หากจะสรุป:
ปัญหา
ประโยชน์
บทความนี้ยังคงมีหัวข้อหลายเรื่องที่ไม่ได้กล่าวถึง: การตั้งค่า repo จากศูนย์, การเพิ่มแพ็คเกจใหม่, และการใช้ GitHub Actions สำหรับ CI/CD เป็นต้น มันจะยาวเกินไปสำหรับบทความนี้ถ้าฉันจะขยายแต่ละอัน ไม่ต้องลังเลที่จะ comment และบอกฉันว่าหัวข้อใดที่คุณอยากเห็นในอนาคต