JavaScript araçları WordPress geliştiricileri için kullanışlıdır
Sevgili programlama arkadaşları, web yapımcıları, kodlar, zorlayıcı noktalı virgül severler ve WordPress hackerları. Gerçekten hala kullanıyor musunuz ve ciddi
hastalığından mı muzdarip misiniz? Endişelenme, neyse ki hepiniz için bir çözüm var. 90’ların dönemini sonsuza dek bırakın ve bir hipster web programcısı olun! Sevgili liderimiz Matt Mullenweg’in birkaç yıl önce söylediği gibi: JavaScript’i derinlemesine öğrenin! Gelecek bugün. Ve bu, özellikle Gutenberg ve genel olarak JavaScript’in tanıtımı sayesinde WordPress dünyasına ulaşacak her şeye bir sıçrama alıp hazırlanmak için konfor bölgemizden ayrılma zamanıdır.
Şu anda kodunuzu biraz veya çaba olmadan ayarlamanıza izin veren birçok JavaScript aracı var. Bu yazıda sizi bu JavaScript harikalarının bazılarıyla tanıştıracağım. Belki bu araçların bazılarını duydunuz, ama aracın ne için olduğunu gerçekten biliyor musunuz? Daha fazla sebep yok! Tüm bunları okumayı bitirdikten sonra, kesinlikle bu JavaScript araçlarından bazılarını denemek istiyorsunuz. Verimliliğiniz ve programlama hipsterizminiz gelecekte kalitede olağanüstü sıçramalar alacaktır. Hadi gidelim! Daha güzel – Kodunuzu otomatik olarak güzelleştirin
Kendiniz denemek istiyorsanız, doğrudan daha güzel siteden erişilebilen oyun alanını kullanın. JavaScript’inizi oraya yazın ve dönüşümden sonra görünümü göreceksiniz. Öte yandan, bilgisayarınıza yüklemek istiyorsanız, NPM arkadaşınızdır: NPM Install -g daha güzel ve test etmek için aşağıdaki gibi kullanabileceğiniz daha güzel bir komutunuz var ./my/file.js Bu komut ./my/file.js dosyasına dönüşüm uygular ve sonuçları komut satırı terminalindeki görüntüler. WordPress, çekirdeğe daha güzel entegre etmeyi düşünüyor, ancak sonunda gerçekleşmiyor gibi görünüyor (tartışmayı burada görebilirsiniz). Ancak daha güzel PHP desteği ekledikten sonra (yapılıyor), WordPress Core.eslint’de bir yer bulabilir. Buna ek olarak, bu, belirli yönergelerle (WordPress dahil) uyumlu olmak için JavaScript kodunuzda yapmanız gereken değişiklikleri de anlatabilir. JavaScript’inizde ESLINT bulunabilecek ortak hataları görmek için web sitelerinde çevrimiçi bir demo görebilirsiniz. Öte yandan, bilgisayarınızdaki Eslint’i test etmek istiyorsanız, aşağıdaki NPM komutunu kullanın: NPM yüklemesi -g Eslint sonra bir yapılandırma dosyası hazırlayın (.eslintrc, daha sonra değiştirebileceğiniz)::
ESLINT -Insit ve hepsi bu. Doğrudan terminalden bir JavaScript dosyasını deneyin: Eslint ./my/file.js Sonuç olarak, Eslert komutunun uygulanması sonucunda bu dosyanın sahip olduğu sorunları (hatalar ve uyarılar) göreceksiniz. Postcss – CSS stilinizi değiştirin Web geliştirme söz konusu olduğunda, en çok nefret ettiğim parçalardan birini CSS ile uğraşıyor. Bu, CSS’nizin tüm tarayıcılarda beklendiği gibi çalışması için her şeyi hesaplamak için bir kabus olabilir. CSS ile yönetim bir kabus olabilir. Nefret ettim! Kaynak: Giphy. Neyse ki benim için (ve elbette diğer web geliştiricileri için), CSS ile çalışmanıza yardımcı olan araçlar var. Nelio’da en sık kullandığımız Postcss. Bu sayede tarayıcı uyumluluğunun önekini unutabiliriz (örneğin -webkit veya -moz). Buna ek olarak, bugün gelecekteki CSS sözdizimini kullanmanızı sağlayan CSSNext içerir.
Test etmek için doğrudan web sitesi oyun alanına gidebilirsiniz. Veya terminalinizin CLI sürümünü de deneyebilirsiniz: NPM Install -g Postcsss -cli
Postcss-chli sonunuz). Babel – Bugün JavaScript’ten yeni nesli kullanın Babylon, tarayıcının desteklemesini beklemeden bugün gelecekteki JavaScript sözdizimini kullanmanıza izin veren bir transpiler JavaScript’tir. Bu, CSS için postcss gibi işlev görür, ancak bu durumda JavaScript için. Örneğin, Babylon ile JavaScript kodunuzdaki ok işlevini kullanabilirsiniz. Aşağıdakiler, Babylon’u geçtikten sonra orijinal kodlar ve kodların örnekleridir: solda, ok işleviyle JavaScript kodu. Sağda, tüm tarayıcılarla uyumlu olan Babylon tarafından üretilen JavaScript eşdeğeri. Bir kez daha, Babylon’u denemek istiyorsanız, bunu doğrudan web sitesinden yapabilirsiniz, burada istediğiniz javascript’i yazabilir ve Babylon’un uygulamasından kaynaklanan JavaScript’i görebilirsiniz. Öte yandan, BABEL paketini yükleyebilir ve kendi terminalinize test edebilirsiniz: NPM Install -g Babel -cli Babel ./my/file.js Komutun sonucu, mevcut tüm tarayıcılarla uyumlu olması için JavaScript kodu değiştirilmiştir. Postcss gibi, projenize en uygun şekilde yükleme talimatlarına bakın (yudum, homurdanma, webpack …).
WebPack – Kodunuzu daha iyi ayarlayın Gutenberg’e de dahil olan diğer JavaScript araçlarını kaçırmak istemiyorum. Bu, tüm proje bağımlılıklarınızı alan, bir bağımlılık ağı üreten ve çalışmanızı kolaylaştırmak için bir paket oluşturabilen bir kod paketleyen bir webpack’tir. Webpack’in ilk başta anlaması oldukça karmaşıktır … yani, doğrudan web sitesinden nasıl çalıştığını açıklayan örnekler:
Webpack kullanımı örnekleri. Yukarıdaki resimde iki JavaScript dosyanız olduğunu görebilirsiniz: App.js ve Bar.js. Mesele, app.js bar.js (ve bu da başka birçok bağımlılık olabilir) bağlıdır. Tüm bağımlılıklar işkence olabilir, ancak webpack ile çok daha basittir. Resimde gösterildiği gibi bir webpack.config.js dosyası oluşturmanız ve App.js’i başlangıç giriş noktası olarak ayarlamanız ve bunları yapmak istediğiniz çıktı dosyası olarak ayarlamanız gerekir, bu da gerekli tüm bağımlılıkları açıkça içerecektir. Bu belirlendikten sonra, otomatik olarak bir Bundle.js dosyası oluşturmak için WebPack komutunu çalıştırın. HTML dosyanıza ekleyin ve bitirin! Fikir, demeti ilk giriş noktasından tanımlamanız ve sonra unutmanızdır. Bağımlılıklar webpack’in kendisi tarafından yönetilir. Bu, Gutenberg gibi birçok dosya ve modül içeren bir projemiz olduğunda çok kullanışlıdır.
