Comment exiger des modules CommonJS dans le navigateur?
Quelle est la meilleure façon de charger les modules CommonJS en javascript côté client dans le navigateur?
Les modules CommonJS placent leurs fonctionnalités dans l'espace de noms module.exports Et sont généralement inclus à l'aide de require(pathToModule) dans un script côté serveur. Les charger sur le client ne peut pas fonctionner de la même manière (nécessite de remplacer, asynchrone doit être pris en compte, etc.)
J'ai trouvé des chargeurs de modules et d'autres solutions: Browserify, RequireJS, yabble, etc. ou des moyens de modifier simplement les modules. Quelle est selon vous la meilleure façon et pourquoi?
J'ai beaucoup utilisé requirejs dans le passé (implémentation sur BBC iPlayer en 2010) et cela fonctionne bien. Il peut gérer les modules CommonJS, mais il a besoin d'un wrapper supplémentaire, ce que je trouve ennuyeux. Si vous souhaitez également utiliser ces modules dans node.js, vous devez également utiliser requirejs côté serveur, ce que je n'aime pas faire car il ne s'agit pas de JavaScript idiomatic node.js.
J'ai utilisé webmake et browserify au cours de la dernière année sur quelques projets. Au début, l'étape de compilation m'a mis hors tension, mais l'ayant largement utilisé cette année, je peux dire que ce n'est pas un problème.
Browserify a une fonction de surveillance incluse, qui fonctionne très bien. Webmake peut être connecté à un observateur (tel que watchr ) ou, vous pouvez utiliser le module webmake-middleware , qui peut être utilisé dans le cadre d'une application express ou connect . Cela a l'avantage qu'au lieu de compiler le JavaScript à chaque sauvegarde, il n'est compilé que lorsque vous le demandez réellement. Connect rend trivial la création d'un serveur (également statique), vous pouvez donc créer un minuscule serveur node.js statique pour servir vos fichiers si vous souhaitez développer votre frontend sans backend.
Bonus: pas besoin de script de construction car vous traitez toujours avec le code construit.
Voici une liste complète de vos options actuelles classées par leur popularité respective (nombre d'observateurs) sur GitHub:
Options d'utilisation de require () dans le navigateur (archive Wayback Machine)
Qu'en est-il de Browserify ? Sa description est la suivante: "Exiger côté navigateur () pour vos modules de nœuds et packages npm", qui sonne ce dont vous avez besoin.
Compilateur CommonJS https://github.com/dsheiko/cjsc Pourquoi? Il fonctionne très bien avec les modules nodejs (CommonJs)/traite le module exactement comme nodejs/et avec UMD, apporte un minimum de code supplémentaire au JavaScript compilé, permet d'exporter des globales de bibliothèques tierces sans toucher à leur code, aux cartes sources et à une astuce que d'autres ne peuvent pas faire :
var str = require( "lorem-ipsum.txt" );
console.log( str );
Sortie:
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Morbi...
Voici les diapositives https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler
Webmake est l'une des options. Je l'utilise pour emballer une application qui est construite à partir de plus de 200 modules de plus de 20 packages. Ça marche.
Si vous voulez voir un exemple, vérifiez: SoundCloud Playlist Manager , il est strictement côté client et construit avec Webmake