İstemci tarafı JavaScript bağımlılıkları nasıl yönetilir? [kapalı]

Sunucu tarafında bağımlılıkları yönetmek için harika çözümler olmasına rağmen, tutarlı bir istemci tarafı JavaScript bağımlılık yönetimi iş akışına sahip olmak için tüm ihtiyaçlarımı karşılayan herhangi bir çözüm bulamadım. Bu 5 gereksinimi karşılamak istiyorum:

1. İstemci tarafı bağımlılıklarımı npm'nin package.json veya bower 's paketine benzer bir biçimde yönetinbower.json
2. Daha dependency.jsonaz bilinen kitaplıklar için dosyamdaki git deposuna veya gerçek js dosyalarına (web üzerinde veya yerel olarak) işaret etme esnekliğine sahip olmalıdır (npm, git depolarını göstermenize izin verir)
3. Tüm kitaplıkları küçültmeli ve ender gibi tek bir dosyada adlandırmalıdır - bu <script>, istemci tarafındaki etiketime koymam gereken tek js dosyasıdır.
4. BoxJS 4 gibi CoffeeScript için kutudan çıkmış desteği olmalıdır (artık öldü)

5. Tarayıcıda, her iki gerekli stili de kullanabilmeliyim :

   var $ = require('jquery');
   var _ = require('underscore');
   

   Ya da daha iyisi, headjs stili yapın:

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });
   

Böyle tek bir araç yoksa, araçların en iyi kombinasyonu, yani volo (veya grunt ) gibi bir şey kullanarak birleştirebileceğim bir alet zinciri hangisidir?

Burada bağlantı kurduğum tüm araçları zaten araştırdım ve gereksinimlerimin en fazla 3'ünü bireysel olarak karşılıyorlar. Bu nedenle, lütfen bu araçlar hakkında bir daha paylaşımda bulunmayın. Yalnızca gereksinimlerimin 5'ini karşılayan tek bir araç sağlayan bir yanıtı veya birisi tüm gereksinimlerimi de karşılayan bu tür birden çok araçtan oluşan bir araç zincirinin somut bir iş akışı / komut dosyası / çalışma örneğini yayınlarsa kabul ederim. Teşekkür ederim.

need.js ihtiyacınız olan her şeyi yapar.

Bu soruya cevabım size yardımcı olabilir

Misal:

İstemci uygulaması proje hiyerarşisi:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js , istemci uygulamanızı başlattığınız ve require.js'yi yapılandırdığınız yerdir:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

Bağımlılıklar kullanacak cs tarafından önüne ne zaman eklentisi "cs!". Cs eklentisi coffeescript dosyasını derler.

Üretim sürecine girdiğinizde , tüm projenizi r.js ile önceden derleyebilirsiniz .

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

İşte ihtiyaçlarınız:

• İstemci tarafı bağımlılıklarımı npm'nin package.json veya bower'ın component.json biçimine benzer bir biçimde yönetin. Farklı ama İYİ!

• Daha az bilinen kitaplıklar için (npm, git depolarını gösterelim) bağımlılık.json dosyamda git repo veya gerçek js dosyalarına (web üzerinde veya yerel olarak) işaret etme esnekliğine sahip olmalıyım. EVET

• Tüm kitaplıkları küçültmeli ve ender gibi tek bir dosyada adlandırmalıdır - bu, istemci tarafındaki komut dosyası etiketime koymam gereken tek js dosyasıdır. EVET r.js. ile

• Box gibi kahve için kutu dışında desteğe sahip olmalıdır. EVET

• Tarayıcıda ya stil ya da headjs kullanabilirim. EVET

http://requirejs.org/ aradığınız kişi olduğuna inanıyorum

@ Guillaume86 olarak bence hem seni olmak istediğin yere en yakın yere götürecek.

Hem bağımlılıklar, npm ve hem kombinasyonu kullanılarak yönetilir. Tüm projelerinizin harici bağımlılıklarını açıkça yüklemek için npm kullanın. İstemci tarafı işlemleriniz için hangi bağımlılıkların (hem harici hem de yerel) birbirine dikilmesi gerektiğini belirtmek için hem kullanın.

Bunun nasıl çalıştığını görebilmeniz için bunun bir iskelet projesi oluşturdum - https://github.com/dsummersl/clientsidehem adresinde görebilirsiniz.

Bağımlılıklar ekleme

Belirli bir bağımlılığı aramak için npm kullanın ve ardından bağımlılığın gelecekte izlenmesini sağlamak için package.json dosyasını değiştirin. Ardından slug.json'da uygulamanız için bağımlılığı belirtin.

Örneğin, kahve komut dosyası bağımlılığını eklemek istediğinizi varsayalım. Bağımlılığı yüklemek ve package.json dosyanıza kaydetmek için npm'yi kullanmanız yeterlidir:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

Kendi modülünüz olan 'çiçek filtrelerini' eklemek istediğinizi ve npm kayıt defterinde olmadığını varsayalım. Bunu projenize aşağıdaki şekilde ekleyebilirsiniz:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

Yerel modüller

Kendi kahvenizi veya javascript'inizi eklemek istiyorsanız, bu dosyaları app / klasöre ekleyerek bunu yapabilirsiniz. Komut dosyanızı 'gerekli' yöntemiyle ortaya çıkarmak için onu bir CommonJS modülü yapmanız gerektiğini unutmayın. Çok basit - etek belgelerine bakın .

Yerel dosyalar

CommonJS olmayan 'gerekli' olmayan kodu dahil etmek istiyorsanız, slug.json'daki 'libs' listesi aracılığıyla özel javascript veya kahve komut dosyanızı referans alarak da dikebilirsiniz.

CSS

İsterseniz, etek de CSS'nizi birleştirir. Etek belgelerine bakın .

Bina

Bağımlılıklarınızı listeledikten sonra, hepsini bir araya getirmek için etek kullanabilirsiniz.

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

Notlar

Hem spinejs projesi içindi - ama bunun için kullanmak zorunda değilsin. Omurgadan istediğiniz gibi bahseden dokümanları göz ardı edin ...

Henüz kimsenin Browserify'dan bahsetmemesine şaşırdım .

1. package.json formatını destekler
2. paket kaynağı olarak bir github (veya herhangi bir git) deposu kullanabilen altında npm kullanır
3. tüm bağımlılıkları tek bir dosyada küçültür ve birleştirir.
4. Bağımlılıklarınıza eklerseniz kahve komut dosyasını destekler
5. her şekilde stil gerektirir.
6. kaynak haritalarını destekler

Hem'in gereksinimlerinizi karşıladığından oldukça eminim (ek derleyicilere sahip bir kişisel çatal kullanıyorum - yeşim ve kalem - ihtiyaçlarınıza göre özelleştirmek kolaydır). Dağıtımları yönetmek için npm kullanır.

İhtiyaçlarınıza yardımcı olmak için çeşitli teknikler kullanan Yeoman'a bir göz atmak isteyebilirsiniz .

İş akışımız, bir web uygulaması oluştururken üretkenliğinizi ve memnuniyetinizi artırmak için üç araçtan oluşur: yo (iskele aracı), grunt (inşa aracı) ve bower (paket yönetimi için).

CoffeeScript, Compass ve daha fazlası için yerleşik destek. R.js ( RequireJS ), birim testi vb. İle çalışır .

Gereksinimlerinize gelince:

1. Bağımlılık yönetimi için Bower kullanılır
2. Bower yerel dosyalar, git: //, http: // ve daha fazlasıyla çalışabilir
3. Küçültme ve birleştirme için yerleşik destek (resimleriniz için bile)
4. CoffeeScript ve Compass'ı otomatik olarak derlemek için yerleşik destek (LiveReload ile)
5. Oluşturma sürecinde belirtildiği gibi: AMD kullanıyorsanız, bu modülleri r.js üzerinden geçireceğim, böylece sizin zorunda kalmayacaksınız.

Tüm özellikler:

Işık hızında iskele - Özelleştirilebilir şablonlar (ör. HTML5 Boilerplate, Twitter Bootstrap), RequireJS ve daha fazlasıyla yeni projeleri kolayca iskeleye oturtun.

Harika derleme süreci - Sadece küçültme ve birleştirme elde etmekle kalmazsınız; Ayrıca tüm görüntü dosyalarınızı, HTML'yi optimize ediyorum, CoffeeScript ve Compass dosyalarınızı derliyorum, eğer AMD kullanıyorsanız, bu modülleri r.js üzerinden geçireceğim, böylece zorunda kalmayacaksınız.

CoffeeScript ve Compass'ı otomatik olarak derleyin - LiveReload izleme sürecimiz, kaynak dosyalarını otomatik olarak derler ve bir değişiklik yapıldığında tarayıcınızı yeniler, böylece sizin yapmanıza gerek kalmaz.

Komut dosyalarınızı otomatik olarak lint - Tüm komut dosyalarınız, en iyi dil uygulamalarını takip etmelerini sağlamak için otomatik olarak JSHint'e karşı çalıştırılır.

Yerleşik önizleme sunucusu - Artık kendi HTTP Sunucunuzu çalıştırmanıza gerek yok. Yerleşik olanım tek bir komutla ateşlenebilir.

Harika Görüntü Optimizasyonu - OptiPNG ve JPEGTran kullanarak tüm görüntülerinizi optimize ediyorum, böylece kullanıcılarınız varlıkları indirmek için daha az, uygulamanızı kullanmak için daha fazla zaman harcayabilir.

Katil paket yönetimi - Bir bağımlılığa mı ihtiyacınız var? Sadece bir tuş vuruşu uzakta. Komut satırı (örneğin, `bower search jquery) aracılığıyla yeni paketleri kolayca aramanıza, bunları yüklemenize ve tarayıcınızı açmanıza gerek kalmadan güncel tutmanıza izin veriyorum.

PhantomJS Unit Testing - Ünite testlerinizi PhantomJS aracılığıyla başsız WebKit'te kolayca çalıştırın. Yeni bir uygulama oluşturduğunuzda, uygulamanız için bazı test iskeleleri de eklerim.

Bower , ihtiyaç duyduğunuz geri kalanı için ihtiyaçlarınızı (1) ve (2) karşılayabilir. Benioku'dan:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

Bir paket kurmak için:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

Bak Jam paket yöneticisi . Ana sayfasındaki açıklama aşağıdadır

Bakım yapılabilir varlıkları isteyen ön uç geliştiriciler için Jam, JavaScript için bir paket yöneticisidir. Diğer depolardan farklı olarak tarayıcıyı ilk sıraya koyuyoruz.

Nasıl çalıştığı konusunda npm'ye çok benziyor.

Paketi aşağıdaki gibi yükleyin

jam install backbone

yürüterek paketleri güncel tutmak

jam upgrade
jam upgrade {package} 

Üretim için paketleri optimize edin

jam compile compiled.min.js

Jam bağımlılıkları package.jsondosyaya eklenebilir .

Belgelerin tamamı için Jam Belgelerini okuyun

Sadece rastladım inject.js

Proje sitesindeki bazı özellikler :

Inject (Apache Software License 2.0), bağımlılıklarınızı Kütüphaneden Bağımsız bir şekilde yönetmenin devrim niteliğinde bir yoludur. Başlıca özelliklerinden bazıları şunlardır:

• Tarayıcıda CommonJS Uyumluluğu (dışa aktarım. *)
• CommonJS Destek Matrisinin tamamını görüntüleyin
• Dosyaların alanlar arası alımı (easyXDM aracılığıyla)
• localStorage (bir modülü bir kez yükleyin)

Birkaç seçenek var:

• http://browserify.org/ modülleri içe aktarmanıza izin verir
• RequireJS aynı sorunu çözer
• Aktif geliştirme aşamasında görünen biri JoinJS'dir

Bileşen de ilgi çekici olabilir, bağımlılıkları kendi başına yönetmez, ancak başka türlü büyük kitaplıkların parçalanmış sürümlerini kullanmanıza izin verir.

Npm ile hem kullanıyorum ve şimdiye kadar kapsanmadığını düşündüğüm bazı ek faydalar eklemek istedim.

• Hem kendi kendine yeten bir web sunucusuna (strata) sahiptir, böylece kodunuzu yeniden derlemeye gerek kalmadan geliştirebilirsiniz. hem buildBir uygulama yayınlamadığım sürece asla kullanmam .
• Hem kullanmak için Spine.js kullanmanıza gerek yoktur, slug.json'u doğru bir şekilde kurarsanız, keyfi kahve komut dosyası paketlerini derlemek için kullanabilirsiniz. İşte cakefile ile otomatik derlenen paketlerimden biri: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Yukarıdakilerden bahsetmişken, hem yerel sisteminizdeki diğer bağımlılıkları npm bağlantısı ile bağlamanıza izin verir ve strata sunucusunu kullanırken bile bunları sorunsuz bir şekilde birleştirir. Aslında, cakeyukarıdaki yöntemi kullanmanıza bile gerek yok , sadece bağımlı projelerden kahve reçetesine doğrudan bağlanabilirsiniz.
• Hem, ecogörünümler için (gömülü Coffeescript) ve CSS için Stylus'u destekler ve tüm bunları, Coffeescript'inizle birlikte bir JS ve bir CSS dosyasında derler.

İşte Spine, etek, kahve yazı uygulaması ile kurulum için temel bir liste. Omurga bölümlerini görmezden gelmekten çekinmeyin. Aslında, bazen spine appSpine dışı bir uygulama için bir dizin yapısı oluşturmak için kullanıyorum, ardından slug.jsonfarklı bir derleme yapısına geçmek için düzenleme yapıyorum .

1. NPM'yi curl http://npmjs.org/install.sh | shbir * nix sistemine kurun . Komut satırından kullanılabileceğini varsayacağım.
2. Hem global olarak ( npm install -g hem) yükleyin . Geliştirme son zamanlarda dallara ayrıldı, bu yüzden onu doğrudan github'dan ( https://github.com/spine/hem ) almak, bir şubeyi kontrol etmek ve npm install -g .o klasörden almak isteyebilirsiniz .
3. npm install -g spine.app omurgayı genel bir komut olarak kullanılabilir hale getirecek
4. spine app folderadlı bir Omurga projesi yapacak appiçinde foldersağ dizin yapısını ve iskelet dosyaların bir demet üreten başlamak için.
5. cddependencies.jsonİhtiyacınız olan kitaplıklar için klasör ve düzenleme . Bunları ekleyin, slug.jsonböylece etek de onları nerede bulacağını bilir.
6. İsteğe bağlı: npm linkgeliştirme aşamasındaki yerel paketlerinizden herhangi biri node_modulesve bunları slug.jsonhem için ekleyebilirsiniz (ya index.jsdoğrudan dahil etmek için ya da index.coffeederlemesini istiyorsanız bir.)
7. npm install . yeni girdiğiniz tüm bağımlılıkları indirmek için.

8. Varsayılan omurga yapılandırmasına bakarsanız, bağımlılıklarınızdan ihtiyacınız olan tüm kitaplıkları bulabileceğiniz bir app/lib/setup.coffeeyer vardır require. Örnekler:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'
   

9. İçinde index.coffee, sadece require lib/setupuygulamanız için ana denetleyiciyi yüklersiniz. Ek olarak, requirebu diğer denetleyicilerdeki diğer sınıflara ihtiyacınız vardır . Kontrolörler ve modeller için şablonlar oluşturmak için spine controller somethingveya kullanabilirsiniz spine model something. Tipik Omurga denetleyicisi, düğümleri kullanarak aşağıdaki gibi görünür require:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header
   

10. Oluşturulan varsayılan index.html, genellikle uygulamanızı yüklemek için yeterli olacaktır, ancak gerektiğinde değiştirin. Gereksinimlerinize göre, hiçbir zaman değiştirmeniz gerekmeyen jstek bir cssdosyayı çeker .

11. Kalem dosyalarınızı cssklasörde gerektiği gibi düzenleyin . CSS'den çok daha esnektir :)
12. Konumundan folder, hem serverbir hem sunucusu başlatmak için çalıştırın ve localhost:9294uygulamanızı görmek için gidin . (Hem global olarak kurduysanız.) Bazı gizli argümanlar vardır, örneğin --host 0.0.0.0tüm portları dinler.
13. Uygulamanızın geri kalanını uygun MVC tekniklerini kullanarak oluşturun ve CSS için ekran kalemi ve görünümler için eko kullanın. Ya da Omurga'yı hiç kullanmayın ve etek ucu Coffeescript ve npm ile harika çalışacaktır. Her iki modeli kullanan birçok proje örneği vardır.

Bir şey daha: normalde, hem serversiz kodunuzu güncelledikçe ve dosyaları kaydettikçe otomatik olarak güncellenir, bu da hata ayıklamayı çok kolay hale getirir. Çalıştırmak hem build, uygulamanızı application.jsküçültülmüş ve application.css. Bundan hem serversonra çalıştırırsanız , bu dosyaları kullanır ve artık otomatik olarak güncellenmez. Dolayısıyla hem build, dağıtım için gerçekten uygulamanızın küçültülmüş bir sürümüne ihtiyacınız olana kadar etmeyin .

Ek referanslar: Spine.js ve hem başlangıç

İşte çok farklı bir yaklaşımı benimseyen bir çözüm: Tüm modülleri bir JSON nesnesine paketleyin ve dosya içeriğini ek istekler olmadan okuyup çalıştırarak modüller gerektirin.

Saf müşteri tarafı demo uygulaması: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / require , çalışma zamanında bir JSON paketinin mevcut olmasına bağlıdır. requireFonksiyon bu paket için üretilir. Paket, uygulamanızın ihtiyaç duyabileceği tüm dosyaları içerir. Paket tüm bağımlılıkları paketlediği için başka http isteği yapılmaz. Bu, istemcide gereken Node.js stiline olabildiğince yakındır.

Paketin yapısı aşağıdaki gibidir:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

Düğümün aksine, bir paket harici adını bilmez. Adlandırma bağımlılığı da dahil olmak üzere pakete bağlıdır. Bu tam bir kapsülleme sağlar.

Tüm bu kurulumlar göz önüne alındığında, burada bir paketin içinden bir dosya yükleyen bir işlev vardır:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

Bu dış bağlam, modüllerin erişebildiği bazı değişkenler sağlar.

Bir requireişlev modüllere açıktır, bu nedenle başka modüller gerektirebilirler.

Global nesneye bir başvuru ve bazı meta veriler gibi ek özellikler de açığa çıkar.

Son olarak, programı modül ve verilen bağlam içinde çalıştırıyoruz.

Bu cevap en çok, senkronize node.js stilinin tarayıcıda ifade gerektirmesini isteyenler ve uzaktan komut dosyası yükleme çözümleriyle ilgilenmeyenler için yararlı olacaktır.

Arka uçta node / express kullanıyorsanız cartero'ya göz atın .

İhtiyaçlarınızın çoğunu karşılayan dojo araç setini incelemenizi öneririm . Emin olmadığım tek şey CoffeeScript.

dojo, Eşzamansız Modül Tanımı (AMD) biçiminde yazılmış modüllerle çalışır. Paketler içeren bir yapı sistemine sahiptir ve bunları bir veya birkaç dosyada (katman adı verilir) toplayabilirsiniz. Görünüşe göre git türü depoları kabul ediyor, burada derleme sistemi hakkında daha fazla ayrıntı:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

Kayıt için, v1.9 beta önümüzdeki ay bekleniyor.

Yakın zamanda yayınlanan tüm kriterlerimi karşılayan başka bir çerçeve: http://duojs.org/ (ve ayrıca CSS gibi diğer kaynakları bağımlılıklar olarak ele almayı destekler).

asenkron yükleme + browsererify ile bağımlılık ekleme, mustjs ile karşılaştırıldığında başka bir iyi seçim olacaktır

AMD olmadan eşzamansız ön uç bağımlılık yönetimi