พื้นที่ทำงานของเส้นด้าย: จัดระเบียบ Codebase ของโครงการของคุณอย่างมืออาชีพ

ทุกครั้งที่ฉันเริ่มทำงานในโครงการใหม่ ฉันถามตัวเองว่า “ฉันควรใช้ที่เก็บ git แยกต่างหากสำหรับเซิร์ฟเวอร์ส่วนหลังและไคลเอนต์ส่วนหน้าของฉันหรือไม่ วิธีที่ดีที่สุดในการจัดระเบียบ codebase คืออะไร”

ฉันมีคำถามเดียวกันนี้หลังจากทำงานบนเว็บไซต์ส่วนตัวของฉันไม่กี่เดือน เดิมฉันมีรหัสทั้งหมดในที่เก็บเดียวกัน: ส่วนหลังใช้ Node.js และส่วนหน้าใช้ ES6 กับ Pug ฉันนำองค์กรนี้มาใช้เพื่อความสะดวก เนื่องจากการมีทั้งสองโปรเจ็กต์ใน repo เดียวกันทำให้ง่ายต่อการค้นหาฟังก์ชันและคลาส และอำนวยความสะดวกในการรีแฟคเตอร์ อย่างไรก็ตาม ฉันพบข้อเสียบางประการ:

• ไม่มีการปรับใช้ที่เป็นอิสระ
  ทั้งสองแอพใช้ package.json เดียวกัน และไม่มีการแบ่งแยกที่ชัดเจนในทั้งสองโปรเจ็กต์
• ขอบเขตไม่ชัดเจน
  เนื่องจากฉันใช้ global package.json ฉันจึงไม่มีกลไกในการตั้งค่าเวอร์ชันเฉพาะสำหรับส่วนหลังและส่วนหน้า
• ยูทิลิตีและโค้ดที่ใช้ร่วมกันโดยไม่มีการกำหนดเวอร์ชัน

หลังจากการค้นคว้า ฉันพบว่าพื้นที่ทำงานของ Yarn เป็นเครื่องมือที่ยอดเยี่ยมในการแก้ปัญหาเหล่านั้น และเป็นเครื่องมือที่มีประโยชน์ในการสร้างโครงการ monorepo (จะมีมาอีกในภายหลัง!)

ในบทความนี้ ฉันจะแบ่งปันข้อมูลเบื้องต้นเกี่ยวกับพื้นที่ทำงานของ Yarn เราจะดำเนินการผ่านบทช่วยสอนร่วมกันเกี่ยวกับวิธีสร้างโครงการแรกของคุณ จากนั้นสรุปและขั้นตอนถัดไปจะจบลง

พื้นที่ทำงานของเส้นด้ายคืออะไร?

Yarn เป็นผู้จัดการแพ็คเกจโดยผู้คนใน Facebook และมีฟีเจอร์ที่ยอดเยี่ยมที่เรียกว่า Yarn workspaces พื้นที่ทำงานของ Yarn ช่วยให้คุณจัดระเบียบ Codebase ของโปรเจ็กต์โดยใช้ที่เก็บแบบเสาหิน (monorepo) แนวคิดคือที่เก็บเดียวจะมีหลายแพ็คเกจ แพ็คเกจถูกแยกออกและสามารถอยู่ได้โดยอิสระจากโครงการที่ใหญ่กว่า

อีกทางเลือกหนึ่งคือ เราสามารถวางแพ็คเกจทั้งหมดเหล่านี้ไว้ในที่เก็บข้อมูลแยกต่างหาก น่าเสียดายที่แนวทางนี้ส่งผลต่อความสามารถในการแชร์ ประสิทธิภาพ และประสบการณ์ของนักพัฒนาเมื่อพัฒนาบนแพ็คเกจและโปรเจ็กต์ที่ต้องพึ่งพาอาศัยกัน นอกจากนี้ เมื่อเราทำงานในที่เก็บเดียว เราสามารถเคลื่อนที่ได้รวดเร็วยิ่งขึ้น และสร้างเครื่องมือเฉพาะเจาะจงมากขึ้น เพื่อปรับปรุงกระบวนการสำหรับวงจรชีวิตการพัฒนาทั้งหมด

โครงการ Monorepo ได้รับการยอมรับอย่างกว้างขวางจากบริษัทขนาดใหญ่เช่น Google หรือ Facebook และได้พิสูจน์แล้วว่า monorepo สามารถปรับขนาดได้

“

React เป็นตัวอย่างที่ดีของโครงการโอเพ่นซอร์สที่เป็น monorepo นอกจากนี้ React ยังใช้พื้นที่ทำงานของ Yarn เพื่อให้บรรลุวัตถุประสงค์ดังกล่าว ในส่วนถัดไป เราจะเรียนรู้วิธีสร้างโปรเจ็กต์ monorepo แรกของเราด้วยเส้นด้าย

สร้างโปรเจ็กต์ Monorepo ด้วย React และ Express โดยใช้ Yarn Workspace ในหกขั้นตอน

จนถึงตอนนี้ เราได้เรียนรู้ว่าเส้นด้ายคืออะไร monorepo คืออะไร และเหตุใดเส้นด้ายจึงเป็นเครื่องมือที่ยอดเยี่ยมในการสร้าง monorepo ตอนนี้ มาเรียนรู้ตั้งแต่เริ่มต้นถึงวิธีตั้งค่าโครงการใหม่โดยใช้พื้นที่ทำงานของ Yarn ในการปฏิบัติตาม คุณจะต้องมีสภาพแวดล้อมการทำงานที่มีการติดตั้ง npm ล่าสุด ดาวน์โหลดซอร์สโค้ด

ข้อกำหนดเบื้องต้น

เพื่อให้บทช่วยสอนนี้สมบูรณ์ คุณจะต้องติดตั้งเส้นด้ายในเครื่องของคุณ หากคุณไม่เคยติดตั้ง Yarn มาก่อน โปรดปฏิบัติตามคำแนะนำเหล่านี้

นี่คือขั้นตอนที่เราจะปฏิบัติตามในบทช่วยสอนนี้:

1. สร้างโครงการและรูทเวิร์กสเปซของคุณ
2. สร้างโครงการตอบโต้และเพิ่มลงในรายการพื้นที่ทำงาน
3. สร้างโครงการด่วนและเพิ่มไปยังพื้นที่ทำงาน
4. ติดตั้งการอ้างอิงทั้งหมดและกล่าวสวัสดีกับ yarn.lock
5. การใช้สัญลักษณ์แทน (*) เพื่อนำเข้าแพ็คเกจทั้งหมดของคุณ
6. เพิ่มสคริปต์เพื่อเรียกใช้ทั้งสองแพ็คเกจ

1. สร้างโครงการและรูทเวิร์กสเปซของคุณ

ในเทอร์มินัลเครื่องของคุณ สร้างโฟลเดอร์ใหม่ชื่อ example-monorepo :

 $ mkdir example-monorepo

ภายในโฟลเดอร์ ให้สร้าง package.json ใหม่ด้วยเวิร์กสเปซรูทของเรา

 $ cd example-monorepo $ touch package.json

แพ็คเกจนี้ควรเป็นแบบส่วนตัวเพื่อป้องกันการเผยแพร่พื้นที่ทำงานรูทโดยไม่ได้ตั้งใจ เพิ่มรหัสต่อไปนี้ในไฟล์ package.json ใหม่ของคุณเพื่อทำให้แพ็คเกจเป็นแบบส่วนตัว:

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. สร้างโครงการตอบโต้และเพิ่มลงในรายการพื้นที่ทำงาน

ในขั้นตอนนี้ เราจะสร้างโปรเจ็กต์ React ใหม่และเพิ่มลงในรายการแพ็คเกจภายในรูทเวิร์กสเปซ

ขั้นแรก ให้สร้างโฟลเดอร์ชื่อ แพ็คเกจ ซึ่งเราจะเพิ่มโครงการต่าง ๆ ที่เราจะสร้างในบทช่วยสอน:

 $ mkdir packages

Facebook มีคำสั่งให้สร้างโครงการ React ใหม่: create-react-app เราจะใช้มันเพื่อสร้างแอป React ใหม่พร้อมการกำหนดค่าและสคริปต์ที่จำเป็นทั้งหมด เรากำลังสร้างโปรเจ็กต์ใหม่นี้ในชื่อ “ไคลเอนต์” ภายในโฟลเดอร์ แพ็คเกจ ที่เราสร้างในขั้นตอนที่ 1

 $ yarn create react-app packages/client

เมื่อเราสร้างโปรเจ็กต์ React ใหม่แล้ว เราต้องบอกให้ Yarn จัดการโปรเจ็กต์นั้นเป็นพื้นที่ทำงาน ในการทำเช่นนั้น เราเพียงแค่เพิ่ม “ไคลเอนต์” (ชื่อที่เราใช้ก่อนหน้านี้) ในรายการ “เวิร์กสเปซ” ใน root package.json อย่าลืมใช้ชื่อเดียวกับที่คุณใช้เมื่อรันคำสั่ง create-react-app

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. สร้างโครงการด่วนและเพิ่มไปยังพื้นที่ทำงาน

ได้เวลาเพิ่มแอปแบ็คเอนด์แล้ว! เราใช้ express-generator เพื่อสร้างโครงร่างด่วนพร้อมการกำหนดค่าและสคริปต์ที่จำเป็นทั้งหมด

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง express-generator บนคอมพิวเตอร์ของคุณ คุณสามารถติดตั้งได้โดยใช้ Yarn ด้วยคำสั่งต่อไปนี้:

 $ yarn global add express-generator --prefix /usr/local

การใช้ express-generator เราสร้างแอป Express ใหม่โดยใช้ชื่อ "เซิร์ฟเวอร์" ภายในโฟลเดอร์ แพ็คเกจ

 $ express --view=pug packages/server

สุดท้าย เพิ่มแพ็คเกจใหม่ “เซิร์ฟเวอร์” ลงในรายการพื้นที่ทำงานภายใน root package.json

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

หมายเหตุ : บทช่วยสอนนี้ลดความซับซ้อนลงโดยมีเพียงสองแพ็คเกจ (เซิร์ฟเวอร์และไคลเอนต์) ในโปรเจ็กต์ โดยทั่วไป คุณอาจมีแพ็กเกจได้มากเท่าที่ต้องการ และตามธรรมเนียมแล้ว ชุมชนโอเพ่นซอร์สจะใช้รูปแบบการตั้งชื่อนี้: @your-project-name/package-name ตัวอย่างเช่น ฉันใช้ @ferreiro/server บนเว็บไซต์ของฉัน

4. ติดตั้งการอ้างอิงทั้งหมดและกล่าวสวัสดีกับ yarn.lock

เมื่อเราเพิ่มแอป React รวมถึงเซิร์ฟเวอร์ Express แล้ว เราจำเป็นต้องติดตั้งการพึ่งพาทั้งหมด พื้นที่ทำงานของ Yarn ทำให้กระบวนการนี้ง่ายขึ้น และเราไม่จำเป็นต้องไปที่ทุกแอปพลิเคชันและติดตั้งการพึ่งพาด้วยตนเองอีกต่อไป แต่เราดำเนินการคำสั่งเดียว — yarn install — และ Yarn ทำเวทย์มนตร์เพื่อติดตั้งการพึ่งพาทั้งหมดสำหรับทุกแพ็คเกจและปรับให้เหมาะสมและแคช

รันคำสั่งต่อไปนี้:

 $ yarn install

คำสั่งนี้สร้างไฟล์ yarn.lock (คล้ายกับตัวอย่างนี้) ประกอบด้วยการขึ้นต่อกันทั้งหมดสำหรับโครงการของคุณ ตลอดจนหมายเลขเวอร์ชันสำหรับการขึ้นต่อกันแต่ละรายการ Yarn สร้างไฟล์นี้โดยอัตโนมัติ และคุณไม่ควรแก้ไข

5. การใช้สัญลักษณ์แทน (*) เพื่อนำเข้าแพ็คเกจทั้งหมดของคุณ

จนถึงขณะนี้ สำหรับทุกแพ็คเกจใหม่ที่เราเพิ่มเข้าไป เราถูกบังคับให้อัปเดต root package.json เพื่อรวมแพ็คเกจใหม่ไปยังรายการ workspaces:[]

เราสามารถหลีกเลี่ยงขั้นตอนแบบ manual นี้ได้โดยใช้ wildcard (*) ที่บอกให้ Yarn รวมแพ็คเกจทั้งหมดไว้ในโฟลเดอร์ แพ็คเกจ

ภายใน root package.json ให้อัปเดตเนื้อหาไฟล์ด้วยบรรทัดต่อไปนี้: "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6. เพิ่มสคริปต์เพื่อเรียกใช้ทั้งสองแพ็คเกจ

ขั้นตอนสุดท้าย! เราจำเป็นต้องมีวิธีการรันทั้งสองแพ็คเกจ — ไคลเอนต์ React และไคลเอนต์ Express — พร้อมกัน สำหรับตัวอย่างนี้ เราจะใช้ concurrently ไป แพ็คเกจนี้ให้เราเรียกใช้หลายคำสั่งพร้อมกัน

เพิ่มไปยัง root package.json concurrently กัน:

 $ yarn add -W concurrently

เพิ่มสคริปต์ใหม่สามตัวภายในเวิร์กสเปซ root package.json สองสคริปต์เริ่มต้นไคลเอนต์ React และ Express อย่างอิสระ อีกอันหนึ่งใช้ concurrently เพื่อเรียกใช้สคริปต์ทั้งสองแบบขนานกัน ดูรหัสนี้สำหรับการอ้างอิง

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

หมายเหตุ : เราไม่จำเป็นต้องเขียน สคริปต์ start ของเรา ลงในแพ็คเกจ "เซิร์ฟเวอร์" และ "ไคลเอนต์" เนื่องจากเครื่องมือที่เราใช้ในการสร้างแพ็คเกจเหล่านั้น ( create-react-app และ express-generator ) ได้เพิ่มสคริปต์เหล่านั้นให้เราแล้ว งั้นเราไปกันเลยดีกว่า!

สุดท้าย ตรวจสอบให้แน่ใจว่าคุณได้อัปเดตสคริปต์การบูต Express เพื่อเรียกใช้เซิร์ฟเวอร์ Express บนพอร์ต 4000 มิฉะนั้น ไคลเอ็นต์และเซิร์ฟเวอร์จะพยายามใช้พอร์ตเดียวกัน (3000)

ไปที่ package/server/bin/www และเปลี่ยนพอร์ตเริ่มต้นในบรรทัดที่ 15

 var port = normalizePort(process.env.PORT || '4000');

ตอนนี้เราพร้อมที่จะรันแพ็คเกจของเราแล้ว!

 $ yarn start

จะไปจากที่นี่ที่ไหน

มาสรุปสิ่งที่เราได้กล่าวถึง อันดับแรก เราได้เรียนรู้เกี่ยวกับพื้นที่ทำงานของ Yarn และเหตุใดจึงเป็นเครื่องมือที่ยอดเยี่ยมในการสร้างโปรเจ็กต์ monorepo จากนั้น เราสร้างโปรเจ็กต์ monorepo JavaScript แรกของเราโดยใช้ Yarn และเราแบ่งตรรกะของแอปออกเป็นหลายแพ็คเกจ: ไคลเอนต์และเซิร์ฟเวอร์ นอกจากนี้เรายังสร้างสคริปต์ npm พื้นฐานตัวแรกและเพิ่มการพึ่งพาที่จำเป็นสำหรับแต่ละแอป

จากจุดนี้ เราขอแนะนำให้คุณตรวจสอบโครงการโอเพนซอร์ซโดยละเอียดเพื่อดูว่าพวกเขาใช้พื้นที่ทำงานของ Yarn เพื่อแยกตรรกะของโครงการออกเป็นหลายแพ็คเกจอย่างไร ปฏิกิริยาเป็นสิ่งที่ดี

นอกจากนี้ หากคุณต้องการดูเว็บไซต์ที่ใช้งานจริงโดยใช้วิธีนี้เพื่อแยกแอปแบ็คเอนด์และฟรอนต์เอนด์ออกเป็นแพ็คเกจอิสระ คุณสามารถตรวจสอบแหล่งที่มาของเว็บไซต์ของฉัน ซึ่งรวมถึงผู้ดูแลบล็อกด้วย เมื่อฉันย้ายฐานรหัสเพื่อใช้พื้นที่ทำงาน Yarn ฉันได้สร้างคำขอดึงด้วย Kyle Wetch

นอกจากนี้ ฉันยังตั้งค่าโครงสร้างพื้นฐานสำหรับโปรเจ็กต์ Hackathon ที่ใช้พื้นที่ทำงาน React, webpack, Node.js และ Yarn และคุณสามารถตรวจสอบซอร์สโค้ดได้ที่นี่

สุดท้าย การเรียนรู้วิธีเผยแพร่แพ็คเกจอิสระของคุณ เพื่อสร้างความคุ้นเคยกับวงจรชีวิตการพัฒนา จะเป็นเรื่องที่น่าสนใจมากสำหรับคุณ มีบทช่วยสอนสองสามข้อที่น่าสนใจในการตรวจสอบ: yarn publish หรือ npm publish

สำหรับความคิดเห็นหรือคำถามใด ๆ อย่าลังเลที่จะติดต่อฉันทาง Twitter นอกจากนี้ ในเดือนต่อๆ ไป ฉันจะเผยแพร่เนื้อหาเพิ่มเติมเกี่ยวกับเรื่องนี้ในบล็อกของฉัน เพื่อให้คุณสามารถสมัครรับข้อมูลจากที่นั่นได้เช่นกัน มีความสุขในการเข้ารหัส!