Vue 3 terus mendapatkan daya tarik di dunia pengembangan web. Dengan pendekatan modern untuk reaktivitas data, menyusun perilaku komponen, dan banyak fitur lainnya, Vue 3 harus mendapat perhatian seperti ini. Satu-satunya aspek Vue yang membutuhkan sedikit bantuan adalah perkakas ruang kerja perusahaan. Di situlah alat monorepo Nrwl, Nx, bisa masuk dan melengkapi lingkungan Vue apa pun!

Kekuatan Monorepo di Nx

Dalam hal kode sumber, memanfaatkan "monorepo" juga menjadi tren yang berkembang di ekosistem perangkat lunak. Bayangkan sebuah dunia di mana tidak perlu menyiapkan build/deploy pipeline untuk berbagi kode. Hambatan masuk untuk menggunakan kembali kode menjadi jauh lebih kecil. Harapan untuk membuat kode berbagi lebih mudah membuka jalur cepat menuju produksi. Tidak ada kekurangan alasan lain mengapa strategi monorepo menarik, dan yang terbaik adalah menjelajahinya untuk melihat apakah itu sesuai dengan kebutuhan Anda.

Itu tidak berarti monorepos adalah kemenangan gratis, karena masalah dan inefisiensi dapat muncul. Alat yang kuat dan teruji membantu menyelesaikan masalah tersebut, dan Nx adalah alat itu .

Nx menyediakan arsitektur yang kuat untuk menghasilkan kode dengan menerapkan gaya dan batasan pengkodean di seluruh monorepo, dan memperluas Nx untuk kasus penggunaan unik tersebut. Yang terbaik dari semuanya, beralih ke monorepo adalah pengalaman pengembang yang mulus (atau seringkali jauh lebih baik) daripada mengelola basis kode terpisah yang pernah ada.

Memulai dengan Vite

Artikel ini berfokus pada aplikasi Vue 3 di monorepo Nx menggunakan Vite . Umumnya, yang terbaik adalah bermigrasi ke Vite karena Vue CLI sudah tidak digunakan lagi .

VueSchool memiliki artikel yang bagus untuk bermigrasi ke Vite ; coba lihat! Sebagai tip cepat: bagian tersulit dari migrasi dari Webpack ke Vite mungkin menemukan dependensi yang kompatibel dengan Vite atau menemukan konfigurasi plugin Vite yang tepat untuk mendukung dependensi pihak ketiga yang ada.

Hal lain: Nx versi 16 memperkenalkan paket cakupan baru ( @nx/). Ini adalah perubahan besar untuk plugin yang ada, jadi kami akan fokus pada versi 15 terbaru. Akan ada pembaruan untuk artikel ini ketika perubahan telah diterapkan.

Plugin Vue Kunci yang Layak Dipertimbangkan

Nx menyediakan dukungan pihak pertama untuk banyak kerangka kerja frontend dan backend. Namun, mereka belum secara resmi mendukung Vue. Untungnya, Vue memiliki komunitas sumber terbuka yang kuat yang telah mengembangkan dukungan Nx!

Pada saat penulisan, ada dua plugin yang patut diselidiki: nx-vue3-vitedan @nxext/vue. Ada beberapa pro dan kontra untuk menggunakan kedua plugin tersebut. Keduanya memiliki dukungan aktif. Keduanya menyediakan pembuatan kode proyek aplikasi dan perpustakaan. Mereka berdua memiliki pelaksana Vite sendiri tetapi secara aktif beralih ke pelaksana pihak pertama Nx. Perbedaannya adalah:

• @nxext/vuebelum siap produksi pada saat penulisan artikel ini. Untuk membuatnya siap produksi, komunitas di sekitar plugin ini ingin memastikan generator memenuhi beberapa tingkat kebutuhan dasar dan bahwa proyek dihasilkan dengan pelaksana Nx's Vite.
• nx-vue3-vitememiliki pendekatan yang sangat berpendirian terhadap pembuatan kode aplikasi. Plugin ini menghasilkan pengaturan Vuex dan Cypress sebagai bagian dari pembuatan proyek aplikasi. Ini mungkin bukan masalah besar jika ada rencana untuk menggunakan dependensi ini.

Namun secara keseluruhan, karena semakin banyak orang mengadopsi Vue dan ingin menggunakannya dalam monorepo Nx, semakin besar kemungkinan masalah ini akan teratasi. Menggunakan salah satu dari plugin ini lebih baik daripada mencoba memulai dari nol karena membuat strategi pembuatan kode itu sulit.

Plugin ini akan membuat bola bergulir untuk proyek apa pun.

Nx Monorepo dan Vue: Menghidupkan Aplikasi Anda, Langkah demi Langkah

Kita akan bekerja dari ruang kerja Nx baru, membuat aplikasi Vue, mengonfigurasi proyek untuk digunakan @nx/vite, dan terakhir menyalin proyek yang sudah ada ke dalam aplikasi yang baru dibuat. Langkah-langkahnya dirujuk di Nx docs .

Buat Ruang Kerja

Untuk memulai, buat ruang kerja kosong dengan perintah berikut:

npx create-nx-workspace@15

Setelah Nx selesai menyiapkan ruang kerja awal, instal nx-vue3-vite, @nrwl/jest@15, @nrwl/vite@15. Karena @nxext/vueproduksi belum siap, kami akan fokus pada nx-vue3-vite.

npm install -D nx-vue3-vite @nrwl/jest@15 @nrwl/vite@15

Membuat aplikasi cukup mudah. Secara konseptual, Anda menjalankan fungsi yang ingin Anda gunakan untuk menghasilkan kode, di Nx kami menyebutnya generator. Kita akan menggunakan generator yang dipanggil vue3-vitedari nx-vue3-vite. Jalankan generator dengan perintah berikut:

npx nx generate nx-vue3-vite:vue3-vite {{nameOfApp}}

Untuk referensi di masa mendatang, Nx dapat menampilkan prompt setiap kali Anda membuat kode. Ini tergantung pada generator yang Anda gunakan. Jika vue3-vitesemua opsi yang diperlukan dipenuhi dengan memberikan nama aplikasi.

Pada titik ini, dengan asumsi Anda tidak memiliki aplikasi Vue yang ada, Anda siap untuk mulai membangun aplikasi Vue Anda!

Gunakan Implementasi Vite Nx

Sangat mudah untuk pindah ke pelaksana Vite resmi Nx. Buka project.jsondi direktori aplikasi Anda dan temukan yang berikut ini:

"build": {
      "executor": "nx-vue3-vite:build-app",
      "options": {
        "dist": "dist/packages/{{nameOfApp}}"
      }
    },

"build": {
      "executor": "@nrwl/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/packages/{{nameOfApp}}"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },

Perubahan lain yang harus dilakukan adalah servemengganti semua servedengan yang berikut ini:

"serve": {
      "executor": "@nrwl/vite:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "{{nameOfApp}}:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "{{nameOfApp}}:build:development",
          "hmr": true
        },
        "production": {
          "buildTarget": "{{nameOfApp}}:build:production",
          "hmr": false
        }
      }
    },

Sekarang aplikasi ini menggunakan @nrwl/vite!

Ganti Aplikasi

Bagian ini cukup sederhana, terutama karena aplikasi Anda sudah ada di Vite. Yang perlu Anda lakukan sekarang adalah menggabungkan aplikasi yang ada ke direktori baru ini dan memperbaruinya package.jsondengan dependensi Anda. Bergantung pada proyek Anda, Anda mungkin perlu memperbarui referensi jalur project.jsonuntuk mewakili apa yang benar. Ini sepenuhnya didasarkan pada aplikasi Anda.

Tentang apa @nxext/vue?

@nxext/vueberbagi sebagian besar langkah yang sama untuk menyiapkan (menginstal dependensi, membuat aplikasi, beralih ke implementasi Vite Nx, dan menyalin aplikasi yang ada) hanya Anda akan mereferensikan dokumentasi untuk @nxext/vue. Penyempurnaan masa depan untuk plugin mungkin tidak mengharuskan Anda memperbarui project.jsonkarena sudah menggunakan @nrwl/vite.

Kesimpulan

Nx memiliki arsitektur yang kuat yang hanya perlu diberi tahu cara menggunakan alat baru. Membuat Vue dapat digunakan dan diperluas dalam monorepo Nx menunjukkan hal itu. Ini menjadi lebih mudah karena Vite adalah plugin pihak pertama. Seiring dengan semakin populernya Vue, plugin yang lebih kuat akan tersedia untuk membuat pembuatan aplikasi dan pustaka menjadi lebih mudah.

Ini membuat saya bertanya-tanya: kerangka kerja apa lagi yang sekarang dapat dikonfigurasi dalam monorepo ini?

Mungkin lain kali kita harus mencoba AngularJS.

Tentang HeroDevs

HeroDevs adalah rekayasa perangkat lunak dan studio konsultasi yang berspesialisasi dalam pengembangan front-end. Tim kami telah menulis atau ikut menulis proyek seperti Angular CLI, Angular Universal, Scully, XLTS — perpanjangan dukungan jangka panjang untuk AngularJS, Vue2, Protractor, dan banyak lainnya. Kami bekerja dengan perusahaan rintisan yang berkembang pesat dan beberapa perusahaan terbesar di dunia seperti Google, GE, Capital One, Experian, T-Mobile, Corteva, dan lainnya. Pelajari lebih lanjut tentang kami di herodevs.com .