Vue 3, web geliştirme dünyasında çekiş kazanmaya devam ediyor. Veri reaktivitesine modern yaklaşımı, bileşenlerin davranışlarını oluşturma ve diğer birçok özelliği ile Vue 3'ün bu tür bir ilgiye sahip olması gerekir. Vue'nun biraz yardıma ihtiyaç duyan tek yönü, kurumsal çalışma alanı araçlarıdır. Nrwl'in monorepo aracı Nx'in gelip herhangi bir Vue ortamını güçlendirebileceği yer burasıdır!

Nx'te Monorepo'nun Gücü

Kaynak kodu söz konusu olduğunda, bir "monorepo"dan yararlanmak da yazılım ekosisteminde büyüyen bir trend olmuştur. Kod paylaşmak için derleme/dağıtma ardışık düzenleri kurmanın gerekmediği bir dünya hayal edin. Kodu yeniden kullanmak için giriş engeli çok daha küçük hale gelir. Kod paylaşımını kolaylaştırma umudu, üretime giden hızlı yolu açar. Bir monorepo stratejisinin çekici olmasının başka nedenleri de vardır ve ihtiyaçlarınıza uygun olup olmadığını görmek için bunları araştırmak en iyisidir.

Sorunlar ve verimsizlikler ortaya çıkabileceğinden, monorepoların ücretsiz bir kazanç olduğu söylenemez. Güçlü, savaşlarla test edilmiş bir araç, bu sorunların çözülmesine yardımcı olur ve Nx bu araçtır .

Nx, monorepo boyunca kodlama stillerini ve sınırları zorlayarak ve bu benzersiz kullanım durumları için Nx'i genişleterek kod oluşturmak için sağlam bir mimari sağlar. Hepsinden iyisi, bir monorepo'ya geçmek, şimdiye kadar ayrı kod tabanlarını yönetmekten daha sorunsuz (veya genellikle çok daha iyi) bir geliştirici deneyimidir.

Vite'a Başlarken

Bu makale, Vite kullanan bir Nx monorepo'daki bir Vue 3 uygulamasına odaklanmaktadır . Genel olarak, Vue CLI kullanımdan kaldırıldığı için Vite'a geçmek en iyisidir .

VueSchool'un Vite'a geçmek için harika bir makalesi var ; buna bir bak! Hızlı bir ipucu olarak: Webpack'ten Vite'a geçişin en zor kısmı, Vite uyumlu bağımlılıklar bulmak veya mevcut üçüncü taraf bağımlılıkları desteklemek için doğru Vite eklenti yapılandırmasını bulmak olabilir.

Başka bir şey: Nx sürüm 16, yeni kapsamlı paketler ( @nx/) tanıttı. Bu, mevcut eklentiler için çok önemli bir değişikliktir, bu nedenle en son 15 sürüme odaklanacağız. Değişiklikler uygulandığında bu makalede güncellemeler yapılacaktır.

Dikkate Alınmaya Değer Key Vue Eklentileri

Nx, birçok ön uç ve arka uç çerçevesi için birinci taraf desteği sağlar. Ancak henüz Vue'yu resmi olarak desteklemiyorlar. Neyse ki Vue, Nx desteğini zaten geliştirmiş güçlü bir açık kaynak topluluğuna sahip!

Yazma sırasında araştırmaya değer iki eklenti var: nx-vue3-viteve @nxext/vue. Her iki eklentiyi kullanmanın bazı artıları ve eksileri vardır. Her ikisinin de aktif desteği var. Her ikisi de uygulama ve kitaplık proje kodu üretimi sağlar. Her ikisinin de kendi Vite yürütücüsü var ama aktif olarak Nx'in birinci taraf yürütücüsüne geçiyorlar. Farklılıklar:

• @nxext/vuebu makalenin yazıldığı sırada üretime hazır değil. Üretime hazır hale getirmek için, bu eklenti etrafındaki topluluk, üreticilerin bazı temel ihtiyaçları karşılamasını ve projelerin Nx'in Vite yürütücüsü ile üretilmesini sağlamak istiyor.
• nx-vue3-viteuygulama kodu üretimine yönelik güçlü bir şekilde düşünülmüş bir yaklaşıma sahiptir. Bu eklenti, uygulama projesi oluşturmanın bir parçası olarak Vuex ve Cypress kurulumunu oluşturur. Bu bağımlılıkları kullanma planları olsaydı, bu büyük bir aleyhte olmayabilir.

Bununla birlikte, genel olarak, giderek daha fazla insan Vue'yu benimsedikçe ve onu bir Nx monorepo'da kullanmak istediğinde, bu sorunların çözülme olasılığı o kadar artar. Kod oluşturma stratejileri bulmak zor olduğundan, bu eklentilerden herhangi birini kullanmak sıfırdan başlamaya çalışmaktan daha iyidir.

Bu eklentiler, herhangi bir proje için topun yuvarlanmasını sağlayacaktır.

Nx Monorepo ve Vue: Uygulamanızı Adım Adım Hayata Geçiriyoruz

Yeni bir Nx çalışma alanından çalışacağız, bir Vue uygulaması oluşturacağız, projeyi kullanacak şekilde yapılandıracağız @nx/viteve son olarak mevcut bir projeyi yeni oluşturulan uygulamaya kopyalayacağız. Adımlara Nx belgelerinde başvurulmaktadır .

Çalışma Alanını Oluşturun

Başlamak için aşağıdaki komutla boş bir çalışma alanı oluşturun:

npx create-nx-workspace@15

Nx ilk çalışma alanını kurmayı bitirdiğinde, nx-vue3-vite, @nrwl/jest@15, @nrwl/vite@15. @nxext/vueÜretim henüz hazır olmadığından , nx-vue3-vite.

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

Bir uygulama oluşturmak yeterince kolaydır. Kavramsal olarak, kod oluşturmak için kullanmak istediğiniz işlevi yürütürsünüz, Nx'te buna jeneratör diyoruz. vue3-viteadlı jeneratörü kullanacağız nx-vue3-vite. Jeneratörü aşağıdaki komutla yürütün:

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

İleride başvurmak için Nx, kod oluşturduğunuzda bilgi istemleri sunabilir. Bu, kullandığınız jeneratöre bağlıdır. Bu vue3-vitedurumda, uygulamanın adı sağlanarak gerekli tüm seçenekler yerine getirilir.

Bu noktada, mevcut bir Vue uygulamanız olmadığını varsayarsak, Vue uygulamanızı oluşturmaya başlamaya hazırsınız!

Nx'in Vite Uygulamasını Kullanın

Nx'in resmi Vite yürütücüsüne geçmek çok basit. project.jsonUygulama dizininizde öğesini açın ve aşağıdakileri bulun:

"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"
        }
      }
    },

Yapılacak diğer değişiklik, servetümünü serveaşağıdakilerle değiştirmektir:

"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
        }
      }
    },

Şimdi bu uygulama kullanıyor @nrwl/vite!

Uygulamayı Değiştir

Bu kısım, özellikle uygulamanız zaten Vite'da olduğu için yeterince basit. Şimdi tek yapmanız gereken mevcut uygulamanızı bu yeni dizinde birleştirmek ve package.jsonbağımlılıklarınızla güncellemek. project.jsonProjenize bağlı olarak, neyin doğru olduğunu göstermek için içindeki yol referanslarını güncellemeniz gerekebilir . Bu tamamen sizin uygulamanıza bağlıdır.

Peki ya @nxext/vue?

@nxext/vuekurulum için aynı adımların çoğunu paylaşır (bağımlılıkları kurun, uygulamayı oluşturun, Nx'in Vite uygulamasına geçin ve mevcut uygulamayı kopyalayın) , yalnızca @nxext/vue. . project.json_ @nrwl/vite_

Çözüm

Nx, yeni araçların nasıl kullanılacağının anlatılması gereken sağlam bir mimariye sahiptir. Vue'yu bir Nx monorepo'da kullanılabilir ve genişletilebilir yapmak bunu gösterir. Vite birinci taraf bir eklenti olduğu için bu daha kolay. Vue daha popüler hale geldikçe, uygulama ve kitaplık oluşturmayı kolaylaştırmak için daha güçlü eklentiler mevcut olacaktır.

Bu beni meraklandırıyor: bu monorepoda artık başka hangi çerçeveler yapılandırılabilir?

Belki bir dahaki sefere AngularJS'yi denemeliyiz.

HeroDevs Hakkında

HeroDevs , ön uç geliştirme konusunda uzmanlaşmış bir yazılım mühendisliği ve danışmanlık stüdyosudur. Ekibimiz Angular CLI, Angular Universal, Scully, XLTS gibi projeler yazdı veya birlikte yazdı — AngularJS, Vue2, Protractor ve diğerleri için genişletilmiş uzun vadeli destek. Hızla büyüyen startup'larla ve Google, GE, Capital One, Experian, T-Mobile, Corteva ve diğerleri gibi dünyanın en büyük şirketlerinden bazılarıyla çalışıyoruz. Herodevs.com'da hakkımızda daha fazla bilgi edinin.