ค้นหาเว็บไซต์

reactjs - วิธีการแชร์คอมโพเนนต์ของ React ข้ามหลายโปรเจกต์?

ฉันมีคอมโพเนนต์ React ไม่กี่ตัวในโปรเจกต์หนึ่งที่ฉันต้องการนำไปใช้ในอีกไม่กี่โปรเจกต์ React อะไรจะเป็นวิธีที่ดีที่สุดในการแชร์คอมโพเนนต์เหล่านี้ข้ามโปรเจกต์ต่าง ๆ ? ฉันรู้ว่าเราสามารถใช้บางอย่างเช่น Bitly ในการทำได้ แต่มีวิธีเปิดแหล่งอื่นเช่น Git Submodules เพื่อแชร์คอมโพเนนต์ข้ามหลายโปรเจกต์หรือไม่

คำตอบ #1

วิธีหนึ่งที่ใช้ได้ผลสำหรับฉันคือการกำหนดคอมโพเนนต์ในแอป React (โดยใช้ create-react-app), นำแอป React ทั้งหมดนั้นไปที่ Github, และใช้ npm install เพื่อติดตั้งมันเป็น dependency ฉันขอแนะนำอย่างยิ่งให้คุณดูแหล่งข้อมูลนี้ซึ่งอธิบายอย่างละเอียดเกี่ยวกับการเตรียมคอมโพเนนต์ React สำหรับกระบวนการนี้ ทำตามขั้นตอนในบทแนะนำที่เชื่อมโยงถึงข้อ #3 จากนั้นนำทุกอย่าง (รวมถึงโฟลเดอร์ /dist) ไปที่ Github หลังจากนั้น, ทำ npm install org_name/repo_name และติดตั้งมันเป็น dependency ในแอป React ที่สองของคุณ จากนั้น, เพื่อการนำเข้าคอมโพเนนต์เฉพาะ คุณสามารถทำได้ประมาณนี้ import { Button } from 'repo_name/dist/index' หรืออ้างอิงไปยังไฟล์ใด ๆ ที่คุณใช้เพื่อส่งออกคอมโพเนนต์ของคุณ

ในกรณีที่ลิงก์ไม่ทำงาน นี่คือขั้นตอนในบทความ:

  1. สร้างโฟลเดอร์ชื่อ lib ที่เก็บคอมโพเนนต์ทั้งหมดที่คุณต้องการนำไปใช้ในแอป React อื่น นอกจากนี้ให้สร้างไฟล์ชื่อ index.js ในโฟลเดอร์นี้ที่ทำหน้าที่ส่งออกคอมโพเนนต์เหล่านี้
  2. สร้างรีโปสำหรับคอมโพเนนต์บน Github
  3. ติดตั้ง Babel และสร้างโฟลเดอร์ dist (npm install --save-dev @babel/core @babel/cli @babel/preset-env และ npm install -save @babel/polyfill)
  4. เพิ่มไฟล์คอนฟิกต่อไปนี้ไปยังโฟลเดอร์ระดับบนสุดของโครงการของคุณ:
{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}
  1. ในไฟล์ package.json ให้แทนที่สคริปต์ build ด้วยสิ่งต่อไปนี้: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
  2. รันคำสั่ง npm run build

คำตอบ #2

มีหลายวิธีขึ้นอยู่กับการตั้งค่าของคุณ ตามที่ @Alex Wayne แนะนำ วิธีที่ง่ายที่สุดคือการใช้ monorepo หากการตั้งค่าของคุณไม่อนุญาต คุณสามารถเผยแพ็คเกจไปยัง npm ได้ หากคุณไม่สามารถหรือไม่ต้องการสร้างแพ็คเกจสาธารณะ คุณสามารถเผยแพ็คเกจส่วนตัว (ด้วยบัญชีที่ชำระเงิน) หรือใช้รีจิสทรีแพ็คเกจส่วนตัว เช่น GitHub packages นอกจากนี้ยังมีโซลูชันที่คุณจัดการรีจิสทรีแพ็คเกจเองได้ หากคุณต้องการประหยัดเงินบางส่วนแลกกับการทำงานเพิ่มเติม.

แก้ไข 2023: ตอนนี้ดูเหมือนว่า Github packages จะมีแผนฟรีสำหรับรีโพสิตอรีส่วนตัวแล้ว ขอบคุณ @Taig ที่ชี้ให้เห็นเรื่องนี้

บทความที่เกี่ยวข้อง