Bagaimana cara mengelola dependensi JavaScript sisi klien? [Tutup]

Meskipun ada solusi hebat untuk mengelola ketergantungan di sisi server, saya tidak dapat menemukan solusi yang memenuhi semua kebutuhan saya untuk memiliki alur kerja pengelolaan ketergantungan JavaScript sisi klien yang koheren. Saya ingin memenuhi 5 persyaratan ini:

1. Mengelola klien saya sisi dependensi dalam format yang sama dengan NPM ini package.json atau pondok 'sbower.json
2. Ini harus memiliki fleksibilitas untuk menunjuk ke git repo atau file js aktual (baik di web atau lokal) di dependency.jsonfile saya untuk perpustakaan yang kurang dikenal (npm membiarkan Anda menunjuk ke git repos)
3. Itu harus mengecilkan dan memberi namespace semua perpustakaan menjadi satu file seperti ender - itulah satu-satunya file js yang perlu saya masukkan ke <script>tag saya di sisi klien
4. Ini harus memiliki dukungan di luar kotak untuk CoffeeScript seperti BoxJS 4 (sekarang mati)

5. Di browser, saya harus dapat menggunakan salah satu gaya yang dibutuhkan :

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

   Atau lebih baik lagi, lakukan gaya headjs :

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

Jika tidak ada satu alat pun yang ada, kombinasi alat apa yang terbaik, yaitu rantai alat yang dapat saya gabungkan menggunakan sesuatu seperti volo (atau grunt )?

Saya telah meneliti semua alat yang telah saya tautkan di sini dan alat tersebut hanya memenuhi hingga 3 persyaratan saya paling baik secara individual. Jadi, tolong jangan memposting lagi tentang alat ini. Saya hanya akan menerima jawaban yang menyediakan satu alat yang memenuhi semua 5 persyaratan saya atau jika seseorang memposting contoh alur kerja / skrip / kerja konkret dari sebuah rantai alat dari beberapa alat yang juga memenuhi semua persyaratan saya. Terima kasih.

Requirement.js melakukan semua yang Anda butuhkan.

Jawaban saya atas pertanyaan ini semoga membantu Anda

Contoh:

Hierarki proyek aplikasi klien:

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

main.js adalah tempat Anda menginisialisasi aplikasi klien Anda dan mengkonfigurasi require.js:

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
});

Dependensi akan menggunakan plugin cs jika diawali dengan "cs!". Plugin cs mengkompilasi file coffeescript.

Ketika Anda pergi di prod, Anda dapat pre-mengkompilasi seluruh proyek Anda dengan r.js .

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

Berikut adalah kebutuhan Anda:

• Kelola dependensi sisi klien saya dalam format yang mirip dengan package.json npm atau component.json bower. Berbeda tapi BAIK!

• Saya harus memiliki fleksibilitas untuk menunjuk ke git repo atau file js aktual (baik di web atau lokal) di file dependency.json saya untuk pustaka yang kurang dikenal (npm mari kita arahkan ke git repos). IYA

• Itu harus mengecilkan dan memberi namespace semua perpustakaan menjadi satu file seperti ender - itulah satu-satunya file js yang perlu saya masukkan ke dalam tag-skrip saya di sisi klien. YA dengan r.js.

• Ini harus memiliki dukungan di luar kotak untuk coffeescript seperti Box. IYA

• Di browser saya bisa menggunakan membutuhkan gaya atau headjs. IYA

http://requirejs.org/ adalah yang Anda cari saya percaya

Sebagai @ Guillaume86 saya pikir hem akan membawa Anda paling dekat ke tempat yang Anda inginkan.

Dalam ketergantungan hem dikelola menggunakan kombinasi npm dan hem. Gunakan npm untuk menginstal secara eksplisit semua dependensi eksternal project Anda. Gunakan hem untuk menentukan dependensi mana (baik eksternal dan lokal) yang harus digabungkan untuk operasi sisi klien Anda.

Saya membuat proyek kerangka ini sehingga Anda dapat melihat bagaimana ini akan bekerja - Anda dapat melihatnya di https://github.com/dsummersl/clientsidehem

Menambahkan dependensi

Gunakan npm untuk mencari dependensi tertentu lalu ubah file package.json untuk memastikan bahwa dependensi tersebut dilacak di masa mendatang. Kemudian tentukan ketergantungan untuk aplikasi Anda di slug.json.

Misalnya, Anda ingin menambahkan dependensi skrip kopi. Cukup gunakan npm untuk menginstal dependensi dan simpan ke file package.json Anda:

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

Misalkan Anda ingin memasukkan modul Anda sendiri 'bloomfilters' dan itu tidak ada di registri npm. Anda dapat menambahkannya ke proyek Anda dengan cara berikut:

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

Modul lokal

Jika Anda ingin memasukkan kopi atau javascript Anda sendiri, Anda dapat melakukannya dengan menambahkan file tersebut ke folder app /. Perhatikan bahwa untuk mengekspos skrip Anda melalui metode 'require', Anda harus menjadikannya sebagai modul CommonJS. Ini sangat sederhana - lihat dokumen hem .

File lokal

Jika Anda ingin menyertakan kode non-CommonJS non 'require', Anda juga dapat menggabungkannya dengan mereferensikan javascript atau coffeescript kustom Anda melalui daftar 'libs' di slug.json.

CSS

Hem akan menjahit CSS Anda juga, jika Anda mau. Lihat dokumen hem .

Bangunan

Setelah dependensi Anda terdaftar, Anda dapat menggunakan hem untuk menjahit semuanya.

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

Catatan

Hem dimaksudkan untuk proyek spinejs - tetapi Anda tidak harus menggunakannya untuk itu. Abaikan dokumen apa pun yang menyebutkan tulang belakang sesuai keinginan ...

Yah, saya terkejut karena belum ada yang menyebut Browserify .

1. mendukung format package.json
2. menggunakan npm di bawahnya yang dapat menggunakan repo github (atau git) sebagai sumber paket
3. mengecilkan dan menggabungkan semua dependensi menjadi satu file.
4. mendukung coffeescript jika Anda memasukkannya ke dalam dependensi Anda
5. membutuhkan gaya sepenuhnya.
6. mendukung peta sumber

Saya cukup yakin Hem memenuhi kebutuhan Anda (saya menggunakan garpu pribadi dengan kompiler tambahan - giok dan stylus - mudah untuk menyesuaikan dengan kebutuhan Anda). Ini menggunakan npm untuk mengelola depedensi.

Anda mungkin ingin melihat Yeoman , yang menggunakan beberapa teknik untuk membantu Anda memenuhi kebutuhan Anda.

Alur kerja kami terdiri dari tiga alat untuk meningkatkan produktivitas dan kepuasan Anda saat membangun aplikasi web: yo (alat perancah), grunt (alat pembuat) dan bower (untuk manajemen paket).

Dukungan bawaan untuk CoffeeScript, Kompas, dan lainnya. Bekerja dengan r.js ( RequireJS ), unittesting dll.

Adapun kebutuhan Anda:

1. Bower digunakan untuk manajemen ketergantungan
2. Bower dapat bekerja dengan file lokal, git: //, http: // dan banyak lagi
3. Dukungan bawaan untuk minifikasi dan penggabungan (bahkan untuk gambar Anda)
4. Dukungan bawaan untuk secara otomatis mengkompilasi CoffeeScript & Compass (dengan LiveReload)
5. Seperti yang dinyatakan dalam proses pembuatan: jika Anda menggunakan AMD, saya akan meneruskan modul tersebut melalui r.js sehingga Anda tidak perlu melakukannya.

Semua fitur:

Perancah secepat kilat - Perancah proyek baru dengan mudah dengan templat yang dapat disesuaikan (mis. HTML5 Boilerplate, Twitter Bootstrap), RequireJS, dan lainnya.

Proses build yang hebat - Anda tidak hanya mendapatkan minifikasi dan penggabungan; Saya juga mengoptimalkan semua file gambar Anda, HTML, mengkompilasi file CoffeeScript dan Compass Anda, jika Anda menggunakan AMD, saya akan meneruskan modul-modul itu melalui r.js sehingga Anda tidak perlu melakukannya.

Kompilasi CoffeeScript & Compass secara otomatis - Proses menonton LiveReload kami secara otomatis mengkompilasi file sumber dan menyegarkan browser Anda setiap kali ada perubahan sehingga Anda tidak perlu melakukannya.

Lint otomatis script Anda - Semua skrip Anda secara otomatis dijalankan terhadap JSHint untuk memastikan mereka mengikuti bahasa terbaik-praktek.

Server pratinjau internal - Tidak perlu lagi menjalankan Server HTTP Anda sendiri. Perangkat bawaan saya dapat diaktifkan hanya dengan satu perintah.

Pengoptimalan Gambar Luar Biasa - Saya mengoptimalkan semua gambar Anda menggunakan OptiPNG dan JPEGTran sehingga pengguna Anda dapat menghabiskan lebih sedikit waktu untuk mengunduh aset dan lebih banyak waktu menggunakan aplikasi Anda.

Manajemen paket yang mematikan - Butuh ketergantungan? Ini hanya dengan menekan tombol. Saya mengizinkan Anda untuk dengan mudah mencari paket baru melalui baris perintah (misalnya `jquery pencarian bower), menginstalnya dan terus memperbaruinya tanpa perlu membuka browser Anda.

Pengujian Unit PhantomJS - Jalankan pengujian unit Anda dengan mudah di WebKit tanpa kepala melalui PhantomJS. Saat Anda membuat aplikasi baru, saya juga menyertakan beberapa perancah uji untuk aplikasi Anda.

Bower mungkin sesuai dengan kebutuhan Anda (1) dan (2) untuk sisanya yang Anda butuhkan Dari readme:

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.

Untuk menginstal paket:

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

Lihat manajer paket Jam . Berikut adalah deskripsi dari homepage-nya

Untuk developer front-end yang mendambakan aset yang dapat dikelola, Jam adalah pengelola paket untuk JavaScript. Tidak seperti repositori lain, kami mengutamakan browser.

Sepertinya sangat mirip dengan npm dalam cara kerjanya.

Instal paket seperti di bawah ini

jam install backbone

memperbarui paket dengan mengeksekusi

jam upgrade
jam upgrade {package} 

Mengoptimalkan paket untuk produksi

jam compile compiled.min.js

Dependensi kemacetan dapat ditambahkan package.json file.

Untuk dokumentasi lengkap, baca Dokumentasi Jam

Saya baru saja menemukan inject.js

Beberapa fitur, dari situs proyek :

Inject (Apache Software License 2.0) adalah cara revolusioner untuk mengelola dependensi Anda dengan cara Library Agnostic. Beberapa fitur utamanya meliputi:

• Kepatuhan CommonJS di Browser (ekspor. *)
• Lihat Matriks Dukungan CommonJS selengkapnya
• Pengambilan file lintas domain (melalui easyXDM)
• localStorage (memuat modul sekali)

Ada beberapa pilihan:

• http://browserify.org/ yang memungkinkan Anda mengimpor modul
• RequireJS mengatasi masalah yang sama
• Salah satu yang tampaknya dalam pengembangan aktif adalah JoinJS

Komponen mungkin juga menarik, tidak mengelola dependensi per se tetapi memungkinkan Anda untuk menggunakan versi pustaka yang sudah dipotong-potong.

Saya menggunakan hem dengan npm, dan saya ingin menambahkan beberapa manfaat tambahan yang menurut saya belum tercakup sejauh ini.

• Hem memiliki server web mandiri (strata) sehingga Anda dapat mengembangkan kode Anda bahkan tanpa perlu mengkompilasi ulang. Saya tidak pernah menggunakan hem buildkecuali saya memublikasikan aplikasi.
• Anda tidak perlu menggunakan Spine.js untuk menggunakan hem, Anda dapat menggunakannya untuk mengompilasi paket coffeescript arbitrer jika Anda mengatur slug.json dengan benar. Berikut salah satu paket saya yang dikompilasi otomatis dengan cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Berbicara tentang hal di atas, hem memungkinkan Anda untuk menghubungkan dependensi lain pada sistem lokal Anda dengan npm link dan menggabungkannya dengan mulus bahkan ketika Anda menggunakan server strata. Faktanya, Anda bahkan tidak perlu menggunakancake metode di atas, Anda cukup menautkan langsung ke coffeescript dari proyek dependen.
• Hem mendukung eco(Coffeescript tertanam) untuk tampilan dan Stylus untuk CSS, dan mengkompilasi semua itu, bersama dengan Coffeescript Anda, menjadi satu file JS dan satu CSS.

Berikut adalah daftar dasar untuk menyiapkan aplikasi Spine, hem, coffeescript. Jangan ragu untuk mengabaikan bagian Spine. Nyatanya, terkadang saya menggunakan spine appuntuk menyiapkan struktur direktori untuk aplikasi non-Spine, lalu mengedit slug.jsonuntuk mengubah ke struktur kompilasi yang berbeda.

1. Instal NPM: curl http://npmjs.org/install.sh | sh pada sistem * nix. Saya akan menganggap itu tersedia dari baris perintah.
2. Pasang hem secara global ( npm install -g hem). Pengembangan telah bercabang akhir-akhir ini sehingga Anda mungkin ingin mendapatkannya langsung dari github ( https://github.com/spine/hem ), memeriksa cabang, dan npm install -g .di folder itu.
3. npm install -g spine.app akan membuat spine tersedia sebagai perintah global
4. spine app folderakan membuat sebuah proyek Spine disebut appdalam folder, menghasilkan struktur direktori yang tepat dan sekelompok file kerangka untuk memulai.
5. cdke folder dan edit dependencies.jsonuntuk perpustakaan yang Anda butuhkan. Tambahkan mereka slug.jsonsehingga hem tahu di mana menemukannya juga.
6. Opsional: npm linksalah satu paket lokal Anda dalam pengembangan node_modules, dan Anda dapat menambahkannya ke slug.jsonfor hem (baik index.jsuntuk menyertakan secara langsung atau index.coffeejika Anda ingin hem untuk mengkompilasinya.)
7. npm install . untuk mengunduh semua dependensi yang baru saja Anda masukkan.

8. Jika Anda melihat pada konfigurasi spine default, di app/lib/setup.coffeesanalah Anda requiresemua perpustakaan yang Anda butuhkan dari dependensi Anda. Contoh:

   # 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. Masuk index.coffee, Anda cukup require lib/setupdan memuat pengontrol utama untuk aplikasi Anda. Selain itu, Anda perlu requirekelas lain di pengontrol lain tersebut. Anda dapat menggunakan spine controller somethingatau spine model somethingmembuat template untuk pengontrol dan model. Pengontrol Spine tipikal terlihat seperti berikut, menggunakan node 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. Default yang dibuat index.htmlbiasanya akan baik-baik saja untuk memuat aplikasi Anda, tetapi ubah sesuai kebutuhan. Sesuai kebutuhan Anda, itu hanya menarik satu jsdan satu cssfile, yang tidak perlu Anda modifikasi.

11. Edit file stylus Anda seperlunya di dalam cssfolder. Ini jauh lebih fleksibel daripada CSS :)
12. Dari folder, jalankan hem serveruntuk memulai server hem, dan arahkan ke localhost:9294untuk melihat aplikasi Anda. (Jika Anda menginstal hem secara global.) Ini memiliki beberapa argumen tersembunyi, misalnya --host 0.0.0.0mendengarkan di semua port.
13. Bangun aplikasi Anda lainnya menggunakan teknik MVC yang tepat, dan gunakan stylus untuk CSS dan eco untuk tampilan. Atau jangan gunakan Spine sama sekali, dan hem akan tetap bekerja dengan baik dengan Coffeescript dan npm. Ada banyak contoh proyek yang menggunakan kedua model tersebut.

Satu hal lagi: biasanya, hem serverakan diperbarui secara otomatis saat Anda memperbarui kode dan menyimpan file, yang membuatnya mudah untuk di-debug. Berjalan hem buildakan mengompilasi aplikasi Anda menjadi dua file application.js, yang diperkecil dan application.css. Jika Anda menjalankannya hem serversetelah ini, itu akan menggunakan file-file itu dan tidak lagi memperbarui secara otomatis. Jadi jangan hem buildsampai Anda benar-benar membutuhkan versi yang diperkecil dari aplikasi Anda untuk penerapan.

Referensi tambahan: Spine.js & hem memulai

Berikut solusi yang mengambil pendekatan yang sangat berbeda: mengemas semua modul menjadi objek JSON dan memerlukan modul dengan membaca dan menjalankan konten file tanpa permintaan tambahan.

Implementasi demo sisi klien murni: http://strd6.github.io/editor/

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

STRd6 / require bergantung pada ketersediaan paket JSON saat runtime. The requirefungsi dihasilkan untuk paket itu. Paket tersebut berisi semua file yang mungkin diperlukan aplikasi Anda. Tidak ada permintaan http lebih lanjut yang dibuat karena paket menggabungkan semua dependensi. Ini sedekat yang bisa didapatkan dengan gaya Node.js yang dibutuhkan pada klien.

Struktur paket adalah sebagai berikut:

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

Tidak seperti Node, sebuah paket tidak mengetahui nama eksternalnya. Terserah pacakge termasuk ketergantungan untuk menamainya. Ini memberikan enkapsulasi lengkap.

Mengingat semua pengaturan itu, inilah fungsi yang memuat file dari dalam sebuah paket:

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

Konteks eksternal ini memberikan beberapa variabel yang dapat diakses modul.

Sebuah requirefungsi diekspos ke modul sehingga mereka mungkin memerlukan modul lain.

Properti tambahan seperti referensi ke objek global dan beberapa metadata juga akan diekspos.

Akhirnya kami menjalankan program dalam modul dan konteks yang diberikan.

Jawaban ini akan sangat membantu bagi mereka yang ingin memiliki pernyataan memerlukan gaya node.js sinkron di browser dan tidak tertarik dengan solusi pemuatan skrip jarak jauh.

Lihat cartero jika Anda menggunakan node / express di backend.

Saya sarankan untuk memeriksa toolkit dojo yang tampaknya memenuhi sebagian besar kebutuhan Anda. Yang saya tidak yakin adalah CoffeeScript.

dojo bekerja dengan modul yang ditulis dalam format Asynchronous Module Definition (AMD). Ini memiliki sistem build dengan paket dan Anda dapat menggabungkannya dalam satu atau beberapa file (disebut lapisan). Rupanya itu menerima repositori tipe git, detail lebih lanjut tentang sistem build di sini:

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

Sebagai catatan, v1.9 beta diharapkan bulan depan.

Kerangka kerja lain yang memenuhi semua kriteria saya yang dirilis baru-baru ini: http://duojs.org/ (dan juga mendukung memperlakukan sumber daya lain seperti CSS sebagai dependensi).

injeksi ketergantungan dengan pemuatan asinkron + browserify akan menjadi pilihan bagus lainnya, dibandingkan dengan requirejs

asynchronous-frontend-dependency-management-without-AMD