Bir programcı olarak, kodumuzun her zaman "bir kez yazılmasını, her yerde çalıştırılmasını" bekleriz, ancak gerçek deneyim genellikle "bir satır değişikliği, delikleri onarmak için yüz yer"dir.
Toplu kod dönüşümü yapmak için her zaman editör tarafından sağlanan “bul ve değiştir” özelliğini kullanırız. Düzenli ifadelere dayanarak, epeyce şeyler yapabiliriz.
Örneğin,
console.logifadeyi kodunuzdan kaldırmak istiyorsanız.
Ekran görüntüsündeki gibi bir şey yapabilirsiniz:
Ancak bu gerçekten tüm davaları kapsıyor mu? Bazı meslektaşlar satır sonlarını gerçekten sever. :)
Bu durumda daha karmaşık düzenli ifadeler yazmamız gerekiyor. Normal ifadeler sorunu çözemediğinde veya bu tür dönüşümleri tekrar tekrar yapmanız gerektiğinde, Codemod yazmayı düşünebilirsiniz .
Codemod, kaynağı bir soyut sözdizimi ağacına (AST) ayrıştıran, AST'yi değiştiren, ardından değiştirilmiş AST'den kaynağı yeniden oluşturan diğer program kodunu yeniden yazmak için kullanılan bir programdır.
İş akışı aşağıdaki şekilde gösterilmiştir:
Modern web projelerinde aslında codemod yaygın olarak kullanılmaktadır. Projeniz muhtemelen kaynak kodunu tarayıcının çalıştırabileceği JavaScript koduna dönüştürmenize yardımcı olması için Babel / TypeScript kullanıyor.
Bu genel gereksinimler iyi bir şekilde çözülmüştür, ancak buna ek olarak, kendimiz tarafından yazılması gereken birçok kişisel gereksinimimiz de vardır. Aslında çok az insan yazmaya isteklidir, sıkıcı bir şekilde manuel olarak tekrarlamayı tercih ederler.
Codemod yazmayı ilk öğrendiğimde, jscodeshift'e dayalı bir codemod'un nasıl yazılacağını açıklamak için kolaydan zora doğru üç örnek sağlayan mükemmel bir öğretici
console.log google'a baktım. aşağıdaki gibi yazılmıştır:
Bu sayede AST yapısına aşina olmanız ve ayrıştırılmış düğüm yapısına karşı codemod'u dikkatli bir şekilde yazmanız gerekir. Kaynağı bir süre sonra okursanız, normal ifadeleri hatırlamaktan daha zor olacaktır - Genellikle AST'ye çok garip geliriz.
Şimdi muhtemelen bul ve değiştir'i kaçırıyorsunuz ve size JavaScript/TypeScript için bir kod modu oluşturmanın yeni bir yolunu tanıtacağım.
GoGoCode'u yarattık (https://github.com/thx/gogocode) kod dönüşümünü kolaylaştırmak isteyen, emsallerinden daha sezgisel bir API sağlayan proje.
Bu demoyu GoGoCode PlayGround'da deneyin
GoGoCode ile, editörünüzde bul ve değiştir gibi AST sorgusu ve değişiklik yapmanıza izin verilir! Ancak uygulamada, GoGoCode
console.log()kaynak kodunuzun AST'sindeki düğümü eşleştirmek ve değiştirmek için bir AST parçasına ayrıştırır, bu nedenle kod biçiminde (satır sonları ve boşluklar gibi) herhangi bir sorun yoktur.
Bu
console.log() , jQuery'deki bir DOM seçiciye benzer, ancak bu sefer DOM düğümleri yerine yalnızca AST düğümlerini seçer.
Daha önce bahsedilen jscodeshift ile kod modu oluşturma eğitiminde, iki karmaşık alıştırma daha kaldı, bakalım GoGoCode ile çözmenin daha kolay olup olmayacağını görelim.
"getCircleArea" lehine kullanımdan kaldırdığımız "circleArea" adlı bir yönteme sahip bir "geometri" modülümüz var. Bunları kolayca bulabilir ve ile değiştirebiliriz
/geometry\.circleArea/g, ancak ya kullanıcı modülü içe aktardıysa ve ona farklı bir ad atadıysa? Örneğin:
import g from 'geometry'; const area = g.circleArea(radius);
Bu demoyu GoGoCode PlayGround'da deneyin
jscodeshift ile aynı şeyi yaparak kontrast
yazılım büyüdükçe bireysel argümanlarla kontrolden çıkan bir yöntem imzamız var ve bu nedenle bu argümanları içeren bir nesneyi kabul etmenin daha iyi olacağına karar verildi.
Görmek yerine
car.factory('white', 'Kia', 'Sorento', 2010, 50000, null, true);:
const suv = car.factory({ color: 'white', make: 'Kia', model: 'Sorento', year: 2010, miles: 50000, bedliner: null, alarm: true, });
Bu demoyu GoGoCode PlayGround'da deneyin
Kontrast jscodeshift ile aynı şeyi yapıyor:
Açıkçası, GoGoCode ile aynı şeyi yapan kodun yazılması ve okunması daha iyidir.
GoGoCode, Alibaba içinde 100.000'den fazla satıra sahip projelere ön uç çerçevesini yükseltme konusunda yardımcı oldu ve ayrıca topluluğa Vue 2'yi Vue 3'e yükseltme konusunda katkıda bulundu.
Bu karmaşık kullanımların altında GoGoCode tamamen işlevsel ve sağlam hale geldi. GoGoCode zaten hızlı başlangıçtan büyük ölçeğe kadar eksiksiz bir desteğe sahiptir.
Günümüzde GoGoCode, büyük web uygulamaları tarafından kullanılan hemen hemen tüm dilleri desteklemektedir:
Temel Eğitim:https://gogocode.io/en/docs/specification/basic
Yemek kitabı:https://gogocode.io/en/docs/specification/cookbook
Temel Eğitim ve Yemek Kitabı ile, bu makaleden çok daha fazla örnek ve açıklama ile gogocode'da ustalaşmanıza yardımcı oluyoruz ve onu öğrenmesi en kolay kod dönüştürme aracı haline getiriyoruz.
https://play.gogocode.io/
Denemek veya basit bir kod modu yazmak istiyorsanız, oyun alanı AST'nin hızlı etkileşimi ve görselleştirilmesi ile size yardımcı olabilir.
Eklenti:https://gogocode.io/en/docs/specification/plugin
CLI:https://gogocode.io/en/docs/specification/cli
Eklentiler ve CLI kombinasyonu, npm paketleri yayınlayarak kod modunuzu paylaşmanıza olanak tanır. Kullanıcıların dönüşümü kendi projelerinde çalıştırabilmeleri için aşağıdaki gibi komutları çalıştırmaları yeterlidir.
gogocode -s a.js -t gogocode-plugin-sample -o a-out.js
https://gogocode.io/en/docs/vue/vue2-to-vue3
Vue 2'den Vue 3'e bazı önemli değişiklikler var, bu yüzden yükseltmenize yardımcı olmak için gogocode'a dayalı bir eklenti yazdık.Denemeye hoş geldiniz!
Eklentinin dönüştürülmesinden önceki ve sonraki bazı farklılıklar:
GoGoCode'un sloganı (https://github.com/thx/gogocode) “Kod dönüşümü hiç bu kadar kolay olmamıştı”. Bu projenin kod dönüşümünü artık gizemli bir köşe değil, her zaman herkese yardımcı olan ortak bir çözüm haline getireceğini umuyoruz.
Bir deneyin ve geri bildiriminizi bize bildirmeyi unutmayın.
Github:https://github.com/thx/gogocode
Ana sayfa:https://gogocode.io/
Gitter:https://gitter.im/thx/gogocode
Kedi Felix'in 9. doğum gününde, yetişkin hayatımın en büyük kayıplarından birini hatırlıyorum - 2013'teki Sophie'm. Bu makaleyi yazdım ve 2013'te bu platformda kısaca paylaştım.
Mars, Uranüs ve Kuzey Düğümü, 1 Ağustos 2022'de 18 derecede Boğa burcunda kavuşuyor. Yataklarımız yanarken nasıl uyuruz?-Gece yarısı yağı Yılın en önemli astrolojik yönlerinden biri olan Mars ve Uranüs'ün kaderin Kuzey Düğümü ile kavuşumu, gerçek bir aciliyet hissinin eşlik ettiği büyük bir uyandırma çağrısıdır.
Bugün farklı bir yolculuğa çıkıyoruz. Çoğunlukla resimler.
Bu blogda, İngilizce'ye yaklaşımımı nasıl ve neden değiştirmeye karar verdiğimi ve yaptığım bazı etkinliklerden para kazanarak bir yıldan kısa bir sürede fakir bir B1'den başlayarak B2 seviyesine nasıl geldiğimi tartışacağım. İçindekiler Okulda örnek bir öğrenci olmasam da İngilizce öğrenmek her zaman kültürel geçmişime eklemek istediğim bir şeydi.
Arka hikaye Her ürünün bir hikayesi vardır ve bu Yapdoof'un başlangıç hikayesidir. Yapdoof, Omept Technology Nijerya Limited'in bir ürünüdür.
Angular uygulamanızın bazı bölümlerinin neden hala yavaş olduğunu merak ediyor musunuz? Bu makale, uygulama performansınızı nasıl artırabileceğinizi size gösterecek. Angular uygulamalarınızı gecikmeli ve yavaş buluyor ancak bunları nasıl geliştireceğiniz konusunda hiçbir fikriniz yok mu? Uygulamanızın performansını artırmanın yaklaşık 5 yolunu öğrenmek için doğrudan bu makaleye dalalım.