ReactPress: Pendekatan Monorepo dengan pnpm untuk Pembangunan Cekap

ReactPress GitHub: https://github.com/fecommunity/reactpress

ReactPress: Pendekatan Monorepo dengan pnpm untuk Pembangunan Cekap

Dalam bidang pembangunan web moden, mengurus kebergantungan dan struktur projek adalah penting untuk mengekalkan pangkalan kod berskala dan boleh diselenggara. ReactPress, platform penerbitan sumber terbuka yang dibina dengan React dan Node.js, menerima pendekatan monorepo menggunakan pnpm untuk menyelaraskan proses ini. Mari kita selami bagaimana ReactPress memanfaatkan keupayaan monorepo pnpm untuk meningkatkan kecekapan pembangunan.

Apa itu Monorepo?

Monorepo (repositori monolitik) ialah amalan pembangunan perisian di mana berbilang projek atau modul diuruskan dalam satu repositori. Pendekatan ini memudahkan pengurusan pergantungan, memupuk penggunaan semula kod dan meningkatkan kebolehselenggaraan projek. ReactPress menggunakan strategi monorepo, terutamanya kerana ia membenarkan pengendalian kebergantungan yang cekap antara berbilang pakej.

Pengenalan kepada pnpm

pnpm ialah pengurus pakej npm berprestasi tinggi yang menggunakan pautan keras dan pautan simbolik untuk mengelakkan penyalinan fail yang tidak perlu. Ini mengurangkan masa pemasangan dan penggunaan ruang cakera dengan ketara. Selain itu, pnpm menyokong ruang kerja, menjadikannya sangat mudah dan cekap untuk mengurus berbilang pakej.

Pelaksanaan Monorepo ReactPress

ReactPress mengatur keseluruhan projeknya sebagai satu repositori Git. Di dalam repositori, berbilang subdirektori wujud, setiap satu mewakili pakej npm bebas yang boleh dibangunkan, diuji dan diterbitkan secara berasingan.

Struktur Projek

Struktur projek ReactPress kelihatan seperti ini:

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

• Direktori klien/ mengandungi kod aplikasi React bahagian hadapan.
• Pelayan/ Direktori mengandungi kod pelayan Node.js hujung belakang.
• Direktori konfigurasi/ menyimpan fail konfigurasi dan skrip.
• Fail .npmrc digunakan untuk menetapkan konfigurasi global untuk npm/pnpm.
• Fail pnpm-workspace.yaml menentukan lokasi subpakej ruang kerja.
• Fail package.json peringkat akar biasanya mentakrifkan skrip global, kebergantungan dan devDependencies.

Mengkonfigurasi Ruang Kerja pnpm

Dalam direktori akar ReactPress, fail pnpm-workspace.yaml menentukan reka letak ruang kerja:

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

Ini menunjukkan bahawa direktori klien dan pelayan dianggap sebagai subpakej ruang kerja.

Pengurusan Kebergantungan

Dalam monorepo, subpakej boleh bergantung antara satu sama lain. Sebagai contoh, subpakej pelanggan mungkin bergantung pada API yang disediakan oleh subpakej pelayan. Dalam pnpm, anda boleh terus menambah kebergantungan dalam fail package.json subpackage, seperti yang ditunjukkan di bawah:

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

Perhatikan bahawa dalam contoh di atas, subpakej pelanggan tidak bergantung secara langsung pada subpakej pelayan kerana aplikasi bahagian hadapan biasanya berkomunikasi dengan pelayan bahagian belakang melalui permintaan HTTP. Walau bagaimanapun, jika aplikasi bahagian hadapan perlu terus menggunakan modul tertentu atau fungsi utiliti yang disediakan oleh bahagian belakang (yang jarang berlaku), anda boleh menambah kebergantungan pada pelayan dalam fail package.json klien.

Skrip dan Bangunan

Dalam fail root package.json ReactPress, anda boleh menentukan skrip global untuk membina, menguji atau menerbitkan keseluruhan projek. Contohnya:

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

Di sini, kami menggunakan pakej serentak untuk memulakan pelayan pembangunan untuk kedua-dua pelanggan dan pelayan secara serentak. pnpm -w arahan menjalankan skrip dalam subpakej ruang kerja yang ditentukan.

Contoh Kod

Di bawah ialah contoh kod ringkas yang menunjukkan cara menyusun dan menjalankan subpakej dalam monorepo ReactPress.

Dengan mengandaikan kami telah menyediakan aplikasi bahagian hadapan React dan pelayan bahagian belakang Express masing-masing dalam subpakej pelanggan dan pelayan. Sekarang, kita boleh menggunakan arahan berikut untuk membina dan memulakan keseluruhan projek:

// In client/package.json
{
  "name": "@reactpress/client",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    // Normally, the client communicates with the server via HTTP requests, so it doesn't directly depend on the server package
    // But if the client needs to directly call modules or utilities provided by the server, you can add a dependency like this
    // "@reactpress/server": "workspace:*"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // Other scripts...
  }
}

// In server/package.json
{
  "name": "@reactpress/server",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1",
    "mysql2": "^2.3.3",
    // Other dependencies...
  },
  "scripts": {
    "start": "node index.js",
    // Other scripts...
  }
}

Arahan ini secara serentak akan memulakan pelayan pembangunan untuk kedua-dua klien dan subpakej pelayan. Anda juga boleh menjalankan arahan berikut untuk memulakan klien atau pelayan secara berasingan:

{
  "name": "reactpress",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start:client": "pnpm -w client start",
    "start:server": "pnpm -w server start",
    "build:client": "pnpm -w client build",
    // Define a script to start both the client and server simultaneously
    "start": "concurrently \"pnpm -w client start\" \"pnpm -w server start\""
  },
  "devDependencies": {
    "concurrently": "^6.2.1",
    // Other development dependencies...
  },
  "workspaces": [
    "client",
    "server"
    // If there are packages in the config directory that need to be included, they can be listed here too
    // "config/some-package"
  ]
}

Kesimpulan

Pendekatan monorepo ReactPress dengan pnpm membawa kemudahan yang ketara kepada pengurusan pergantungan dan struktur projek. Dengan mengatur aplikasi React bahagian hadapan dan pelayan Node.js bahagian belakang dalam repositori yang sama, ReactPress boleh berkongsi kod, konfigurasi dan alatan dengan mudah antara subpakej yang berbeza, sambil memudahkan pengurusan pergantungan dan proses binaan. Jika anda sedang membangunkan projek yang diasingkan bahagian hadapan-belakang berskala besar dan ingin mengurus kebergantungan dan struktur kod anda dengan lebih baik, pendekatan monorepo ReactPress pastinya merupakan contoh yang berbaloi untuk diikuti.

Jangan ragu untuk meneroka repositori ReactPress di GitHub dan lihat cara ia memanfaatkan keupayaan monorepo pnpm untuk meningkatkan kecekapan pembangunan. Selamat mengekod! ?

Atas ialah kandungan terperinci ReactPress: Pendekatan Monorepo dengan pnpm untuk Pembangunan Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!