NPX ve Komutan ile Geliştirici Otomasyonu

JavaScript’in gelişimi hakkında ne kadar çok şey öğrendiysem, JavaScript’in üretim ve yapılandırma araçlarına o kadar maruz kaldım.Babylon ve webpack gibi araçlar beni hayal kırıklığına uğratıyor.Yapılandırma araçları, sihirli pixie tozu veya bir şey aracılığıyla sizin için tüm bina araçlarınızı hazırlayan sihirli yazılım sevinç, böylece kod yazabilmeniz için beni büyülüyor.Umarım WordPress için daha fazlasına sahip oluruz ve tam olarak yapılması gerektiğini düşündüğüm gibi bir şeyler yaparız.Şablonlama kodu için şablon dilini kullanmayı gerçekten sevmiyorum.Daha önce kendi iskele aracımı oluşturmamı engelleyen de buydu.Her zaman şablonum tarafından yapmak istediğim gibi şeyler yapan eklentiler yaparım, ardından eklentiyi yaptığım ikame dizesinden şablon dizine kopyalayıp daha sonra bir ikame dizesi eklerim.Hata ayıklama acı vericidir.
Yeni amacım, eklentinin yapmasını istediğim her şey için referans durumu olan bir eklentiyi kaydetmek – composer.json, gutenberg bloğu, doğrudan enjeksiyon kabı PHP, vb. – ve eklentiden kopyalayabilen bir iskele aracı. NPM üzerinden kolayca paylaşabilmek için düğümde yazmaya karar verdim ve yerel olarak, bir Docker kapsayıcısında veya hatta sunucu olmayan bir uygulamada çalıştırabilirim. Düğüm ve NPX dosya sistemi modülü hakkında daha fazla bilgi edinmek için iyi bir nedendir. NPX NPX ile rahat olmak, önce yüklemeden herhangi bir yerden bir düğüm paketi çalıştırmanıza izin veren bir araçtır. Bu, sadece ara sıra kullandığınız uygulama iskelesi araçları için mükemmeldir. Yerel olarak yüklü kopyaları saklamak yerine, sürümü NPM’de çalıştırırsınız. Örneğin, bir reaksiyon uygulaması oluşturmak için, bilgisayarınıza küresel olarak Create-React-App’i yükleyebilirsiniz veya aynı şeyi yapmak için NPX Create-React-App’i kullanabilirsiniz ve onarma veya alan harcama konusunda endişelenmenize gerek yoktur. depolamak.
NPM’ye dahil olan NPX’e alışık değilseniz, NPX hakkında bir tanıtım yazısı okumanızı öneririm. Bir tanıtım gönderisinde Kat, Github Gist’te depolanan JavaScript’in nasıl çalıştırılacağını gösterir. Belirttiğinde, bu çok güvensiz olma potansiyeline sahip uzun mesafeli bir kodun yürütülmesidir. Bu komut dosyasını çalıştırmanın ilk adımı, çalıştıracağınız kodun kaynağını okuyun, ikinci adım, çalıştırmak isteyip istemediğinize karar vermektir ve üçüncü adım uzun mesafeli kodun yürütülmesine neden olmaktır. Hadi bunu yapalım. İlk olarak, https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32’yi açın ve komut dosyasına bakın. En son gördüğümde sadece bir konsol mesajının kaydedilmesine neden oldu. Değişmediğinden emin olun. Eğer öyleyse, öyle değil: Mesajın girmesine neden olur. Paketi yerel şeritle çalıştırın. Bu harika, otomasyonumuzun çekirdeği olarak saklanan komut dosyasını geliştirebiliriz. Ancak gelişme deneyiminin kötü olacağı. Kodu çekirdekten itip çizmemiz gerekirse, test etmek, yavaş olacaktır. Kodu yerel olarak test etmeyi tercih ederim. Evet, kodu doğrudan düğümle çalıştırabilirim, örn. Yerel dizine dönüp index.js düğümünü veya her neyse çalıştırın. Gerçekten istediğim, geliştirme sürümünü bağlamda kullanmak. NPX-Soğuk’un yerel geliştirme sürümünü kullanmak için bilgisayarımın herhangi bir yerinden NPX ~/NPX-IS-Sol kullanabilirsem ne olur?
NPX’in yerel bir dosya yolu kullanabileceği ortaya çıkıyor, bu yüzden mümkün. Bunun size NPX’in nasıl çalıştığı konusunda nasıl bir temel göstereceğini araştıralım. İlk olarak, çekirdek kopyayı indirin. Ana kullanıcı dizininize koyun ve dizin adını “npx-is-cool” olarak değiştirin. Sonra index.js açın ve göreceksiniz: Bu oldukça temel bir komut dosyasıdır, çıktıyı “Ben Batman’ım” gibi daha eğlenceli bir şeye değiştirin, böylece yerel sürümünüzün kullanıldığını kanıtlayabilirsiniz ve Batman olduğunuz için.
Artık bu komutu kendi NPX-IS-Sool’unuzu kullanmak için bilgisayarınızın herhangi bir yerinden çalıştırabilirsiniz.
Şimdi araç geliştirmek için temel bir modelimiz var. Yerel olarak bir NPX paketi geliştirin, bağlamda kullanın ve hata ayıklayın. Son kısım önemli, bir geliştirme aracı yapıyorum, çalışıp çalışmadığını görmek için geliştirdiğim araçlarda kullanmak istiyorum ve bundan sonra çalıştıkları anda benim için kullanılabilir bir yeteneğe sahip olduğum. Evet, ayrıca kontrolün uzak sürümündeki değişikliklerimi teşvik etmek ve paketi NPM aracılığıyla kullanılabilir hale getirmek istiyorum. Ancak, gelişirken, sürümleri yönetmeyi düşünmek istemedim.
Sadece “Hai Roy” yayınlayan komuta komutanına girin
Commander ile Geliştirici Otomasyonu, yerel ve uzun mesafeli dosyalarla çalışmak için bir düğüm kullanıyor Pratik bir şey için, WordPress eklentisindeki React uygulaması için varlıkları yüklemek için kullandığım iki PHP dosyasını kopyalayan iki dosyayı kopyalayan bir komut yaptım ve değiştirdim. Orada ad alanı. Bunu başarmak için dört şeye ihtiyacımız olacak:
Dosyaları Uzak URL’den Yerel’ye indirme işlevi. İlk işlevi kullanan ve ardından ortaya çıkan dosyadaki ad alanını değiştiren bir işlev.

İşlevleri çağıran işlev doğru argüman olacaktır
İşlevi çağırmak için komut.
Listeden geçelim. Düğüm dosya sistemi hakkında eksiksiz bir öğretici yazmak istemiyorum, ancak bu yıldırım kursunuz.
Düğümde, dosya sistemini kullanıyoruz – örneğin dosyaları okuma ve yazma – “FS” kullanarak. Örneğin, bir dosya olup olmadığını kontrol etmek için: var fs = için (‘fs’);
fs.Existsync (__ dirname + ‘/hhioy.txt’); FS modülünü okumak oldukça kolaydır. Bu işleve “varolistsync” denir. Bir dosya varsa – senkronize – kontrol etti. FS ile dosyaları yazabilir, Fs.WriteNc () kullanarak senkronize edebiliriz. İhtiyaç duymaya alışık değilseniz (). Bu, kapsamda belirttiğiniz dosyanın modülünü taşır. Örneğin, “foo.js” dosyası varsa ve içinde bir modülünüz var. Sonra const foo = reque (‘./foo’) kullandığınızda; İşlevi şimdi const foo’da saklanan aynı dizindeki dosyadan. NODE_MODULES DIRECTORY’daki modüle erişmek için Dosya Yolu – Gereken (‘React’) – NODE_MODULES/React/index.js dışını dışa aktarabiliriz.
Aşağıda, HTTPS modülünü kullanarak HTTPS aracılığıyla dosya indirmelerini işlemek ve FS modülünü kullanarak dosyaya yazmak için bir modül bulunmaktadır:
Son satırda – Module.Exports = İndir. İndirme işlevine bir referansdır, bu nedenle bu dosyaya ihtiyacımız olduğunda işlev kullanılabilir. Bir sonraki modülde böyle kullanıyoruz. İşte dosyayı indirmek ve PHP ad alanını değiştirmek için bir modül. const download = need (‘./download’); const replace = requir (‘ölü değiştir’);
const yolu = ihtiyaç (‘yol’);
/**
* Dosyayı indirin ve ad alanını değiştirin
*
*
* @param {string} uzun mesafeli dosyalar kopyalayacak
* @param {String} Destpath Yolu Dosyaları yazmak için
* @param {string} ad alanı ad alanı yeni dosyalar için kullanılır
*/
Fonksiyon DownloadNamespace (Dosya, Despath, Namespace) {
İndir (Dosya, Hedef Yolu, () => {{
yer değiştirmek({
Kimden: “/calderawp \ wordpresslugin/g”,
TO: Ad alanı,
Dosya: [Despath]
});
});
}
Module.Exports = DownloadPHPandnamespace; Gerekli () hala aşina iseniz, indirmek ve dosyayı değiştirmek için gerekenler arasındaki farkı görün. Birincisi ‘./’ dosya yolu ile başlar, böylece düğüm dosyayı arar. Diğerleri Node_Modules’ta çok görünür değil.
Bu işlevin hiçbiri yapmak istediğimiz belirli dosyalarla çalışmaz. Herhangi bir dosya ile çalışırlar, iyi, bu genel bir ihtiyaçtır. Ama mevcut sorunları çözmeye başlayalım. İki dosya indirip yeniden adlandırmalıyız. Bu iki işlevle, dosyaların gittiği yolu ayarlamak için sadece bir tane daha ihtiyacımız var. Komutu şimdi yapın, tüm bunları bir komutla sarmanın zamanı geldi, böylece NPX Caldera-Mantan Müşteri-Mahkemeleri ~/Plugin satıcı/paket yazabilir ve komut dosyalarımızı ad alanı satıcısı/paketle kopyalayabiliriz. Bu bir alt -paketimizin hükümeti. Bu deseni seviyorum – birçok seçeneğe sahip sadece bir komut var. Bu, daha sonra ek sipariş ve seçenekler eklemeyi kolaylaştıracaktır.
Komut işlevinde (), dirsek parantezlerindeki kelimeler “eylem” işlevine iletilen değişkenler haline gelir. İşlevin işlevi, son adımda yapılan işlevi çağıran basit bir geri çağrıya bağlıdır. Şimdi, genellikle kullanmadığım JavaScript parçaları hakkında daha fazla bilgi edinmekten zevk alıyorsunuz çünkü sadece ön uç geliştiriciler için JavaScript kullanıyorlar. Yapılandırılmış bir düğüm modülünün nasıl Webpack’in dağıldığı hakkında daha fazla anlamama yardımcı olduğunu öğrenmek. Dosya sistemi hakkında daha fazla bilgi edindim. Daha da önemlisi, zamanımı ve ekibimi kurtarması gereken NPX uygulamam üzerinde çalıştım. Bunun gibi araçların ekibinizin zamanını kaydedebileceğini düşünüyorsanız, kendinizi oluşturun ve yaratın. Twitter’imde @Josh412’de veya yaptığınız şeyle ilgili bir yorum bırakın.