loader
bg-category
Hem Tarayıcı hem de Düğüm için Çapraz Ortam Javascript NPM Paketi Yazma

Arkadaşlarınla ​​Paylaş

Yazarın Makaleleri: Kenneth Douglas

Kısa Bayt:Çoğu düğüm modülünün, Çapraz Ortam Javascript'ini Node.js ve tarayıcıda desteklemesi gerekir. UMD, çevreyi kontrol etme ve daha sonra modülümüzün mantığını yazma konusunda iyi bir paketleyiciydi, ancak uyarıları var. Yani, tek bir işlev veya dosyada başka mantık varsa, çok fazla yazmak zorundayızDüğüm-tarayıcı-gidermeknpm paketi, çoklu ortamlar için bir modül yazmamıza yardımcı olur.package.jsondosya.

Bir npm modülü yazmayı düşünüyorsanız, modülün ortam üzerinde çalışmasını sağlamak için örneğin Node, tarayıcı gibi ortamlarda rastlamak olabilir. Ve eski projelerin koruyucusuysanız, j’nin AMD kalıp modüllerini talep edin. Çapraz ortam uyumluluğunu sağlamak için bir modül yazmanın en yaygın yolu UMD veya Evrensel Modül Tanımı'dır.

(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMD. İsimsiz bir modül olarak kaydolun. define (['b'], factory);} else if (typeof module === 'object' && module.exports) {// Düğüm. Sıkı CommonJS ile çalışmaz, ancak // yalnızca module.exports destekleyen // yalnızca CommonJS benzeri ortamlar, // Gibi Düğüm. module.exports = factory (gerektirir) ('b'));} else {// Tarayıcı globals (root penceresi) // b, root.returnExports = factory (root.b); (this, function (b) {// bir şekilde b kullanın. // Sadece modül dışa aktarmasını tanımlamak için bir değer döndürün. // Bu örnek bir nesne döndürür, ancak modül // dışa aktarılan değer olarak bir işlev döndürür. dönüş {}; }));

Bu güzel desen, Q söz kütüphanesi için kullanıldığında @kriskowal'dan ilham aldı.

Geçerbubağlam ve bağımlılığı olan bir fonksiyonb(isteğe bağlı olabilir) işlevinde erişilen bir IIFE’dekökvefabrikasırasıyla işlev.

İf ve else koşullu ifadeler, modülün kullanıldığı ortamı kontrol eder. Eğertanımlamaktanımlanır ve bir işlevdir, yani RequireJS gibi bir şey, bağımlılıkları zaman uyumsuz olarak yönetmek için kullanılır. Eğermodülbir nesne vemodule.exportsboş veya tanımsız değil, o zaman modülümüzün bir düğüm ortamında kullanıldığı anlamına gelir. Yukarıdakilerden hiçbiri değilse (örneğin, modül tarayıcıda kullanılıyor;bubağlampencerenesne) daha sonra modülümüzün fabrika işlevini (modülün mantığının bulunduğu yer) doğrudan kök dizine ekleriz (bu durumdapencere genel tarayıcı nesnesi).

Ancak bekleyin, artık RequireJS kullanmıyorum, çünkü ES2015 ithalatı yapıyor veya Düğüm’ün CommonJS modülünü seviyorumgerektirir benimle çok kullanışlı, artık kolayca kullanabileceğim araçların gücü ile birlikte. Modülünüze hangi ortamda kullanıldığını ve buna göre nasıl davranılacağını sorunsuzca anlatmak için npm ve Node değerlerini birlikte kullanabileceğiniz kolay bir yol var. Çapraz Çevre davranışı kolaylaştı.

Giriş olarak bir dize alan ve base-64 kodlu sürümü çıkaran basit bir javascript yardımcı program paketine bir örnek verelim.

Tarayıcı için bu kolay, çünkü biz sadece btaodahili fonksiyon:

module.exports = function (string) {return btoa (string); };

Düğümde olsa, varbtaoişlevi. Yani, bir tane oluşturmamız gerekecekTamponyerine, sonra arabuffer.toString ()üstünde:

module.exports = function (string) {return Buffer.from (string, 'binary'). toString ('base64'); };

Şimdi, doğru sürümü doğru ortamda kullandığımızdan emin olabilmemiz için tarayıcıda mı yoksa Node'da mı çalıştığımızı tespit etmek için (UMD deseni gibi ancak daha az ayrıntılı) bir yola ihtiyacımız var. Her ikisi de Browserifyve webpack donatılacak araçlarprocess.browserdöndüren alandoğru,Oysa Düğümde yanlıştır. Yani basitçe yapabiliriz

if (process.browser) {module.exports = function (string) {return btoa (string); }; } else {module.exports = function (string) {return Buffer.from (string, 'binary'). toString ('base64'); }; }

Şimdi sadece dosyamızı adlandırıyoruz.index.jssonra yazınnpm yayınlaModülümüzün kökleri aracılığıyla terminalimiz üzerinden ve yapılmalıyız.

ama büyük bir performans sorunu var

Bizim beriindex.jsdosyada artık Düğüm’ün yerleşiklerine referanslar varsüreçvetamponher ikisi de modüller Browserify vewebpackPaketimizdeki tüm modüller için otomatik olarak çoklu dosyalar içerecektir (paketlemeden sonraki son dosya). Bu nedenle, paketimizde oturan çok fazla miktarda gereksiz kodumuz var.

Modülümüzün bu basit görünümlü 9 satır kodu ile Browserify ve Webpack 24,7KB minine edilmiş (7,6KB min + gz) ağırlığında bir paket yaratacaktır. Tarayıcıda yalnızca ile ifade edilmesi gereken bir şey için çok fazla bayt var.btao dahili tarayıcı işlevi.

ENTER: PAKETTE BROWSER SAHASI.JSON

Node-browser-solve npm paketi ile anahtar adına yeni bir alan eklememize izin verirtarayıcıbizim içindepackage.jsondosya.

Bu tekniği kullanarak, paketimize aşağıdakileri ekleyebiliriz:

{/ * ... * / "tarayıcı": {"./index.js": "./browser.js"}}

Ve sonra fonksiyonları iki farklı dosyaya ayırın,index.jsvebrowser.js

// index.js module.exports = function (string) {return Buffer.from (string, 'binary'). toString ('base64'); }; // browser.js module.exports = function (string) {return btoa (string); };

Bu düzeltmeden sonra, her iki dağıtıcı da önemli ölçüde daha az boyutta demet üretir.

Browserify : 511 bayt (315 dak + gzipli) webpack : 550 bayt (297 bayt + gzipli)

Şimdi modülümüzü yayınladığımızda, düğümü Node ortamında kullanmak, kodumuzun Düğüm sürümünü ve tarayıcı gibi kullanan paketleyicileri kullanan herkes olacak.browserifyvewebpacktarayıcı sürümünü alacak.

İşte, tarayıcı ve düğüm kodunu aynı işlevsellik için bu çapraz ortam uyumluluğu için ayrı tutmanın en basit yolu!

Eklemek için bir şey var mı? Düşüncelerinizi ve görüşlerinizi bırakın.

Arkadaşlarınla ​​Paylaş

Si̇zi̇n Yorumlar