Ruang Kerja Benang: Atur Basis Kode Proyek Anda Seperti Seorang Profesional

Setiap kali saya mulai mengerjakan proyek baru, saya bertanya pada diri sendiri, “Haruskah saya menggunakan repositori git terpisah untuk server back-end saya dan klien front-end saya? Apa cara terbaik untuk mengatur basis kode?”

Saya memiliki pertanyaan yang sama setelah beberapa bulan mengerjakan situs web pribadi saya. Saya awalnya memiliki semua kode di repositori yang sama: bagian belakang menggunakan Node.js dan bagian depan menggunakan ES6 dengan Pug. Saya mengadopsi organisasi ini untuk kenyamanan, karena memiliki kedua proyek dalam repo yang sama memudahkan pencarian fungsi dan kelas, dan memfasilitasi refactor. Namun, saya menemukan beberapa kelemahan:

• Tidak ada penerapan independen.
  Kedua aplikasi menggunakan package.json yang sama, dan tidak ada pemisahan yang jelas pada kedua proyek.
• Batas yang tidak jelas.
  Karena saya mengandalkan package.json global, saya tidak memiliki mekanisme untuk mengatur versi spesifik untuk back end dan front end.
• Utilitas dan kode bersama tanpa pembuatan versi.

Setelah beberapa penelitian, saya menemukan bahwa ruang kerja Benang adalah alat yang hebat untuk mengatasi kontra tersebut, dan itu adalah alat yang berguna untuk membuat proyek monorepo (lebih banyak lagi akan datang nanti!).

Pada artikel ini, saya membagikan intro ke ruang kerja Benang. Kami akan menjalankan tutorial bersama tentang cara membuat proyek pertama Anda dengannya, dan kami akan menyelesaikannya dengan rekap dan langkah selanjutnya.

Apa Itu Ruang Kerja Benang?

Yarn adalah manajer paket oleh orang-orang di Facebook, dan ia memiliki fitur hebat yang disebut ruang kerja Benang. Ruang kerja benang memungkinkan Anda mengatur basis kode proyek Anda menggunakan repositori monolitik (monorepo). Idenya adalah bahwa satu repositori akan berisi beberapa paket. Paket diisolasi dan dapat hidup secara independen dari proyek yang lebih besar.

Sebagai alternatif, kami dapat menempatkan semua paket ini ke dalam repositori terpisah. Sayangnya, pendekatan ini memengaruhi kemampuan berbagi, efisiensi, dan pengalaman pengembang saat mengembangkan paket dan proyek yang bergantung padanya. Selain itu, ketika kita bekerja dalam satu repositori, kita dapat bergerak lebih cepat dan membangun alat yang lebih spesifik untuk meningkatkan proses untuk seluruh siklus hidup pengembangan.

Proyek Monorepo telah diterima secara luas oleh perusahaan besar seperti Google atau Facebook, dan mereka telah membuktikan skala skala monorepo.

“

Bereaksi adalah contoh yang baik dari proyek sumber terbuka yang monorepo. Juga, React menggunakan ruang kerja Yarn untuk mencapai tujuan itu. Di bagian selanjutnya kita akan belajar cara membuat proyek monorepo pertama kita dengan Benang.

Membuat Proyek Monorepo Dengan React Dan Express Menggunakan Ruang Kerja Benang Dalam Enam Langkah

Sejauh ini, kita telah mempelajari apa itu Benang, apa itu monorepo, dan mengapa Benang adalah alat yang hebat untuk membuat monorepo. Sekarang mari belajar dari awal cara menyiapkan proyek baru menggunakan ruang kerja Yarn. Untuk mengikuti, Anda memerlukan lingkungan kerja dengan instalasi npm terbaru. Unduh kode sumbernya.

Prasyarat

Untuk menyelesaikan tutorial ini sepenuhnya, Anda harus menginstal Yarn di mesin Anda. Jika Anda belum pernah menginstal Yarn, harap ikuti petunjuk berikut.

Ini adalah langkah-langkah yang akan kita ikuti dalam tutorial ini:

1. Buat Proyek Anda Dan Root Workspace
2. Buat Proyek Bereaksi Dan Tambahkan Ke Daftar Ruang Kerja
3. Buat Proyek Ekspres Dan Tambahkan Ke Ruang Kerja
4. Instal Semua Dependensi Dan Ucapkan Halo Kepada yarn.lock
5. Menggunakan Wildcard (*) Untuk Mengimpor Semua Paket Anda
6. Tambahkan Skrip Untuk Menjalankan Kedua Paket

1. Buat Proyek Anda dan Root Workspace

Di terminal mesin lokal Anda, buat folder baru bernama example-monorepo :

 $ mkdir example-monorepo

Di dalam folder, buat package.json baru dengan ruang kerja root kami.

 $ cd example-monorepo $ touch package.json

Paket ini harus bersifat pribadi untuk mencegah penerbitan ruang kerja root secara tidak sengaja. Tambahkan kode berikut ke file package.json baru Anda untuk membuat paket menjadi pribadi:

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

2. Buat Proyek Bereaksi Dan Tambahkan Ke Daftar Ruang Kerja

Pada langkah ini, kita akan membuat proyek React baru dan menambahkannya ke daftar paket di dalam ruang kerja root.

Pertama, mari buat folder bernama paket tempat kita akan menambahkan berbagai proyek yang akan kita buat di tutorial:

 $ mkdir packages

Facebook memiliki perintah untuk membuat proyek React baru: create-react-app . Kami akan menggunakannya untuk membuat aplikasi React baru dengan semua konfigurasi dan skrip yang diperlukan. Kami membuat proyek baru ini dengan nama "klien" di dalam folder paket yang kami buat pada langkah 1.

 $ yarn create react-app packages/client

Setelah kami membuat proyek React baru kami, kami perlu memberi tahu Yarn untuk memperlakukan proyek itu sebagai ruang kerja. Untuk melakukan itu, kita hanya perlu menambahkan "klien" (nama yang kita gunakan sebelumnya) di dalam daftar "ruang kerja" di root package.json . Pastikan untuk menggunakan nama yang sama dengan yang Anda gunakan saat menjalankan perintah create-react-app .

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

3. Buat Proyek Ekspres Dan Tambahkan Ke Ruang Kerja

Sekarang saatnya menambahkan aplikasi back-end! Kami menggunakan express-generator untuk membuat kerangka Ekspres dengan semua konfigurasi dan skrip yang diperlukan.

Pastikan Anda telah menginstal express-generator di komputer Anda. Anda dapat menginstalnya menggunakan Benang dengan perintah berikut:

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

Menggunakan express-generator , kami membuat aplikasi Ekspres baru dengan nama "server" di dalam folder paket .

 $ express --view=pug packages/server

Terakhir, tambahkan "server" paket baru ke dalam daftar ruang kerja di dalam root package.json .

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

Catatan : Tutorial ini disederhanakan dengan hanya dua paket (server dan klien). Dalam sebuah proyek, Anda mungkin biasanya memiliki paket sebanyak yang Anda butuhkan, dan menurut konvensi, komunitas sumber terbuka menggunakan pola penamaan ini: @your-project-name/package-name . Misalnya: Saya menggunakan @ferreiro/server di situs web saya.

4. Instal Semua Dependensi Dan Ucapkan Halo Kepada yarn.lock

Setelah kami menambahkan aplikasi React kami, serta server Express kami, kami perlu menginstal semua dependensi. Ruang kerja benang menyederhanakan proses ini dan kita tidak perlu lagi membuka setiap aplikasi dan menginstal dependensinya secara manual. Sebagai gantinya, kami menjalankan satu perintah — yarn install — dan Yarn melakukan keajaiban untuk menginstal semua dependensi untuk setiap paket, dan mengoptimalkan serta menyimpannya dalam cache.

Jalankan perintah berikut:

 $ yarn install

Perintah ini menghasilkan file yarn.lock (mirip dengan contoh ini). Ini berisi semua dependensi untuk proyek Anda, serta nomor versi untuk setiap dependensi. Benang menghasilkan file ini secara otomatis, dan Anda tidak boleh memodifikasinya.

5. Menggunakan Wildcard (*) Untuk Mengimpor Semua Paket Anda

Sampai sekarang, untuk setiap paket baru yang kami tambahkan, kami terpaksa juga memperbarui root package.json untuk memasukkan paket baru ke daftar workspaces:[] .

Kita dapat menghindari langkah manual ini menggunakan wildcard (*) yang memberitahu Benang untuk memasukkan semua paket di dalam folder paket .

Di dalam root package.json , perbarui konten file dengan baris berikut: "workspaces": ["packages/*"]

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

6. Tambahkan Skrip Untuk Menjalankan Kedua Paket

Langkah terakhir! Kita perlu memiliki cara untuk menjalankan kedua paket — klien React dan klien Express — secara bersamaan. Untuk contoh ini, kita akan menggunakan concurrently . Paket ini memungkinkan kita menjalankan beberapa perintah secara paralel.

Tambahkan concurrently ke root package.json :

 $ yarn add -W concurrently

Tambahkan tiga skrip baru di dalam root workspace package.json . Dua skrip menginisialisasi klien React dan Express secara independen; yang lain menggunakan concurrently untuk menjalankan kedua skrip secara paralel. Lihat kode ini untuk referensi.

 { "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\" } }

Catatan : Kami tidak perlu menulis skrip start kami ke dalam paket "server" dan "klien" karena alat yang kami gunakan untuk membuat paket tersebut ( create-react-app dan express-generator ) sudah menambahkan skrip tersebut untuk kami. Jadi kita baik untuk pergi!

Terakhir, pastikan Anda memperbarui skrip boot-up Express untuk menjalankan server Express pada port 4000. Jika tidak, klien dan server akan mencoba menggunakan port yang sama (3000).

Buka paket/server/bin/www dan ubah port default di baris 15.

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

Sekarang kami siap menjalankan paket kami!

 $ yarn start

Ke mana harus pergi dari sini?

Mari kita rekap apa yang telah kita bahas. Pertama, kami belajar tentang ruang kerja Yarn dan mengapa ini adalah alat yang hebat untuk membuat proyek monorepo. Kemudian, kami membuat proyek monorepo JavaScript pertama kami menggunakan Benang, dan kami membagi logika aplikasi kami menjadi beberapa paket: klien dan server. Selain itu, kami membuat skrip npm dasar pertama kami dan menambahkan dependensi yang diperlukan untuk setiap aplikasi.

Dari titik ini, saya sarankan Anda meninjau proyek sumber terbuka secara rinci untuk melihat bagaimana mereka menggunakan ruang kerja Yarn untuk membagi logika proyek menjadi banyak paket. React itu bagus.

Juga, jika Anda ingin melihat situs web produksi menggunakan pendekatan ini untuk memisahkan aplikasi back-end dan front-end menjadi paket independen, Anda dapat memeriksa sumber situs web saya, yang juga menyertakan admin blog. Ketika saya memigrasi basis kode untuk menggunakan ruang kerja Benang, saya membuat permintaan tarik dengan Kyle Wetch.

Selain itu, saya menyiapkan infrastruktur untuk proyek hackathon yang menggunakan React, webpack, Node.js, dan ruang kerja Yarn, dan Anda dapat memeriksa kode sumbernya di sini.

Akhirnya, akan sangat menarik bagi Anda untuk mempelajari cara memublikasikan paket independen Anda agar terbiasa dengan siklus hidup pengembangan. Ada beberapa tutorial yang menarik untuk diperiksa: yarn publish atau npm publish.

Untuk komentar atau pertanyaan, jangan ragu untuk menghubungi saya di Twitter. Juga, di bulan-bulan berikutnya, saya akan mempublikasikan lebih banyak konten tentang ini di blog saya, sehingga Anda dapat berlangganan di sana juga. Selamat mengkode!