Bagaimana cara memodulasi dan mengemas pustaka Javascript sisi-klien hari ini?

Saya telah mengejar ketinggalan dengan ekosistem JS sisi klien modern dan membaca CommonJS dan AMD (termasuk alat terkait - browser, browser yang diperlukan, satu, selai, puluhan lainnya). Jika saya menulis perpustakaan Javascript, bagaimana saya memodulasi / mengemasnya sedemikian rupa sehingga dapat diakses secara luas (idealnya oleh pengguna yang bersumpah dengan CommonJS, AMD, dan terutama keduanya)?

Perpustakaan populer seperti jQuery tampaknya hanya menggunakan penggabungan file old-school untuk membangun dirinya sendiri dan secara dinamis mendeteksi apakah itu harus menulis ke exportskonteks global atau. Saat ini saya melakukan hal yang sama, tetapi kelemahan utama adalah bahwa jika saya (tidak seperti jQuery) bergantung pada beberapa perpustakaan, senang tidak perlu meminta pengguna untuk secara manual memasukkan pra-set transitif. (Meskipun saat ini saya hanya memiliki dua dependensi.) Dan tentu saja polusi namespace global.

Atau mungkin itu terbersih untuk menghasilkan beberapa versi perpustakaan saya, untuk setiap konteks?

Saya juga ingin tahu tentang pengemasan dan penerbitan. Ada beberapa sistem, tapi saya percaya yang utama adalah bower, yang mudah ditangani karena yang dilakukannya hanyalah mengambil. Namun, saya bertanya-tanya apakah saya juga harus menargetkan sistem paket lain seperti komponen (yang membutuhkan CommonJS).

Apakah ada aspek relevan lainnya yang harus saya perhatikan? Apakah ada contoh proyek yang baik untuk diikuti untuk semua ini?

Saya selalu terbiasa menggunakan build file tetapi sejak saya memulai proyek nodejs pertama saya, saya mulai menggunakan browserify . Dengan browerify dan pustaka sejenis lainnya kode Anda adalah file build Anda. Saya mengambil keuntungan dari perpustakaan klien dan server yang dapat berjalan pada keduanya tetapi juga dapat bekerja dengan kode klien murni. Untuk meringkasnya, browserify memberi Anda semua manfaat dari penulisan kode dalam simpul (tidak ada fungsi untuk menghindari global, npm, membutuhkan sederhana) dan memungkinkan Anda untuk mengemas kode itu untuk dijalankan pada klien dengan satu perintah dan hanya memuat satu file.

Dengan browserify, Anda dapat melakukan sesuatu seperti (bernama app.js):

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

browserify app.js> client.js

Akan menghasilkan sesuatu seperti:

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

File yang akan Anda tentukan dapat memiliki semua lib pihak ke-3 Anda disertakan dan tidak berbenturan dengan pengembang mana pun yang menggunakannya.

--Edit dalam menanggapi komentar (dan kehilangan pertanyaan)

Saya kira itu akan tergantung pada dependensi Anda dan berapa banyak waktu yang ingin Anda habiskan untuk memastikan mereka bekerja di semua versi dan lib. Jika dependensi Anda umum dan ikuti api yang sama dari versi ke versi, Anda bisa menggunakan rute Backbone dan hanya meminta pengguna untuk memiliki $ dan _. Saya akan menyarankan menempatkan lib yang lebih tidak jelas sebagai bagian dari file yang dibundel. Opsi tidak harus dipotong dan dikeringkan juga. Anda dapat menawarkan paket pre-built atau membangun sendiri.

Jenis perpustakaan sisi klien:

1. Menyentuh DOM
2. Tidak menyentuh DOM

Dengan jenis pertama (widget UI dll), Anda biasanya akan menganggap jQuery ada. Anda juga dapat menulis "DOM library agnostic" dan membuatnya bekerja dengan yang kurang populer juga, tetapi saya tidak repot-repot.

Dengan jenis kedua. Pertama-tama, jangan menjadikannya plugin jQuery, misalnya "plugin cookie jQuery" konyol tetapi pustaka semacam itu benar-benar ada.

Kedua jenis ini mungkin tidak memiliki dependensi, dependensi kecil atau dependensi besar - dengan perpustakaan dom tidak dihitung sebagai dependensi dalam pengertian ini. Dengan 2 yang pertama, Anda hanya akan menggabungkannya di dalam ruang lingkup perpustakaan Anda dan tidak khawatir tentang kemungkinan duplikasi. Sebagai contoh, jQuery menggabungkan isArrayLikefungsi internal , meskipun pengguna mungkin sudah memiliki sendiri dari beberapa perpustakaan sabuk utilitas acak.

Saya hanya punya satu pengalaman pribadi dengan ketergantungan yang sangat besar ketika mengembangkan perpustakaan (sebenarnya bahasa) - moment.js. Dalam hal ini saya akan menyediakan 2 build, satu dengan moment.js digabungkan dan satu tanpa, di mana pengguna bertanggung jawab untuk memasukkannya. Saya tidak tahu apakah ini solusi yang baik.

Dan ya, dalam setiap kasus, pendekatan jQuery membangun satu file besar terakhir yang hanya berfungsi diambil. Ini memiliki modul boilerplate di bagian bawah (memerlukan / AMD / deteksi dll global).