Comment modulariser et empaqueter une bibliothèque Javascript côté client aujourd'hui?

J'ai rattrapé l'écosystème JS côté client moderne et lu sur CommonJS et AMD (y compris les outils associés - browserify, requirejs, onejs, jam, des dizaines d'autres). Si j'écris une bibliothèque Javascript, comment la modulariser / empaqueter pour qu'elle soit la plus largement accessible (idéalement par les utilisateurs qui ne jurent que par CommonJS, AMD, et surtout aucun)?

Les bibliothèques populaires comme jQuery semblent simplement utiliser la concaténation de fichiers à l'ancienne pour se construire et détecter dynamiquement si elles doivent écrire dans un exportscontexte global ou. Je fais actuellement la même chose, mais le principal inconvénient est que si je (contrairement à jQuery) dépend de quelques bibliothèques, il est agréable de ne pas avoir à demander aux utilisateurs de pré-inclure manuellement l'ensemble transitif. (Bien que je n'ai actuellement que deux dépendances.) Et bien sûr, la pollution globale des espaces de noms.

Ou peut-être qu'il est plus propre de générer plusieurs versions de ma bibliothèque, pour chaque contexte?

Je m'interroge également sur l'emballage et la publication. Il existe plusieurs systèmes, mais je pense que le plus important est Bower, qui est facile à gérer car il ne fait que chercher. Cependant, je me demande si je devrais également cibler d'autres systèmes de package comme le composant (qui nécessite CommonJS).

Y a-t-il d'autres aspects pertinents dont je devrais être conscient? Y a-t-il de bons exemples de projets à suivre pour tout cela?

J'ai toujours utilisé des fichiers de construction, mais depuis que j'ai commencé mon premier projet nodejs, j'ai commencé à utiliser browserify . Avec browerify et d'autres bibliothèques similaires, votre code est votre fichier de construction. Je profite d'une bibliothèque client et serveur qui peut fonctionner sur les deux mais elle peut également fonctionner avec du code purement client. Pour résumer, browserify vous donne tous les avantages d'écrire du code dans le nœud (pas de fonctions anon pour éviter les globaux, npm, simple nécessite) et il vous permet de conditionner ce code pour qu'il s'exécute sur le client avec une seule commande et ne charge qu'un seul fichier.

Avec browserify, vous pouvez faire quelque chose comme (nommé 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

Produirait quelque chose comme:

[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
}

Le fichier que vous définiriez pourrait inclure toutes vos bibliothèques tierces et ne pas entrer en conflit avec l'un de vos développeurs qui l'utilisent.

--Modifiez en réponse au commentaire (et manquez complètement la question)

Je suppose que cela dépend de vos dépendances et du temps que vous souhaitez passer à vous assurer qu'elles fonctionnent sur toutes les versions et bibliothèques. Si vos dépendances sont courantes et suivent la même API d'une version à l'autre, vous pouvez suivre la route Backbone et demander simplement à l'utilisateur d'avoir $ et _. Je suggérerais de mettre les bibliothèques les plus obscures dans le cadre du fichier fourni. Les options ne doivent pas non plus être coupées et séchées. Vous pouvez proposer un pré-construit ou construire votre propre package.

Types de bibliothèques côté client:

1. Touches DOM
2. Ne touche pas DOM

Avec le premier type (widgets UI, etc.), vous supposerez généralement que jQuery est présent. Vous pouvez également écrire "DOM bibliothèque agnostique" et le faire fonctionner avec les moins populaires aussi, mais je ne m'en soucie pas.

Avec le deuxième type. Tout d'abord, n'en faites pas un plugin jQuery, par exemple "plugin cookie jQuery" est ridicule mais une telle bibliothèque existe réellement.

Ces deux types peuvent ne pas avoir de dépendances, de petites dépendances ou d'énormes dépendances - avec une bibliothèque dom ne comptant pas comme une dépendance dans ce sens. Avec les 2 premiers, il vous suffit de les concaténer dans la portée de votre bibliothèque et de ne pas vous soucier d'une éventuelle duplication. Par exemple, jQuery concatène une isArrayLikefonction interne , même si l'utilisateur peut avoir la sienne déjà incluse dans une bibliothèque de courroies utilitaires aléatoires.

Je n'ai qu'une seule expérience personnelle avec une énorme dépendance lors du développement d'une bibliothèque (en fait une langue) - moment.js. Dans ce cas, je fournirais 2 versions, une avec moment.js concaténée et une sans, où l'utilisateur est responsable de l'inclure. Je ne sais pas si c'est une bonne solution.

Et oui, dans tous les cas, l'approche jQuery consistant à créer un gros fichier final qui fonctionne correctement est adoptée. Il a le module passe-partout en bas (nécessite une détection / AMD / globale, etc.).