Comment puis-je utiliser npm pour les dépendances frontales?

Je souhaite demander s'il est possible (et généralement une bonne idée) d'utiliser npm pour gérer les dépendances frontales (Backbone, jQuery).

J'ai constaté que Backbone, jQuery et ainsi de suite sont disponibles via npm mais je devrais définir un autre point d'extraction (la valeur par défaut est node_modules ) ou un lien symbolique ou autre chose …

Quelqu'un at-il déjà fait cela?

C'est possible?

Que dois-je changer dans package.json ?

Réponse courte: sorte de .

Il incombe en grande partie à l'auteur du module d'appuyer cela, mais ce n'est pas courant. Socket.io est un exemple d'un tel module de support, comme cela a été démontré sur leur page de destination. Il existe cependant d'autres solutions. Ce sont les deux dont je connais quelque chose:

  • http://ender.no.de/ – Ender JS, auto-décrit l'analogique NPM pour les modules clients. Un peu trop impliqué pour mes goûts.
  • https://github.com/substack/node-browserify – Browserify, un utilitaire qui va parcourir vos dépendances et vous permet de produire un seul script en émulant le modèle du module node.js. Vous pouvez utiliser un script de compilation jake | cake | rake | make pour cracher votre application.js, et même l'automatiser si vous voulez avoir de la fantaisie. J'ai utilisé cela brièvement, mais j'ai décidé que c'était un peu clunky, et devenait ennuyeux de déboguer. De plus, tous les modules npm à deux environnements ne doivent pas être utilisés par navigateur.

Personnellement, je opte actuellement pour l'utilisation de RequireJS ( http://requirejs.org/ ) et la gestion manuelle de mes modules, de la même façon que Mozilla avec l'application exemple BrowserQuest ( https://github.com/mozilla/BrowserQuest ). Notez que cela vient avec le défi d'avoir à potentiellement couper des modules comme le backbone ou le trait de soulignement qui supprime le support des chargeurs de modules de style AMD. Vous pouvez trouver un exemple de ce qui est impliqué dans le calage ici: http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript

Vraiment, il semble que cela va mal, peu importe quoi, c'est pourquoi le support de module natif est un sujet aussi chaud.

+1 pour utiliser Browserify. Nous l'utilisons ici chez diy.org et nous l'aimons. La meilleure introduction et le raisonnement derrière Browserify se trouvent dans le manuel Browserify . Des sujets comme les solutions CommonJS et AMD, la construction de pipelines et les tests sont abordés ici.

La principale raison pour laquelle Browserify fonctionne très bien est qu'il fonctionne de manière transparente avec NPM. Tant qu'un module peut être requis, il peut être navigué (mais tous les modules ne sont pas conçus pour fonctionner dans le navigateur).

Principes de base:

 npm install jquery-browserify 

Main.js

 var $ = require('jquery-browserify'); $("img[attr$='png']").hide(); 

Ensuite, exécutez:

 browserify main.js > bundle.js 

Ensuite, incluez bundle.js dans votre document HTML et le code dans main.js s'exécutera.

Notre équipe maintient un outil appelé Lineman pour la construction de projets avant-gardistes. L'outil est basé sur un noeud, de sorte qu'un projet repose sur beaucoup de modules npm qui fonctionnent sur le serveur pour créer vos actifs, mais qui est prêt à retrouver les dépendances du client copiées et engagées envers le vendor/js .

Cependant, un groupe de personnes (moi-même inclus) ont essayé d'intégrer avec browserify, et nous avons rencontré beaucoup de complexité et de problèmes, allant de (a) les modules npm étant gérés par un tiers qui sont soit obsolètes, soit ajoutés Les modifications indésirables, (b) les bibliothèques réelles qui commencent à défaillir lorsqu'elles sont chargées traditionnellement lorsqu'une fonction de niveau supérieur requise est même définie, en raison des bagages AMD / Require.js.

Ma recommandation à court terme est de bloquer et de rester avec une concaténation de script bien élaboré jusqu'à ce que la poussière s'installe. Jusqu'à ce que vous ayez des problèmes assez gros ou assez complexes pour le justifier, je pense que vous passerez plus de temps à déboguer et à réparer votre build que vous ne le feriez autrement. Et je pense que la plupart d'entre nous acceptent que la meilleure utilisation de votre temps se concentre sur votre code d'application, pas ses outils de construction.

J'utilise personnellement webmake pour mes petits projets. C'est une alternative au navigateur dans la façon dont il apporte des dépendances npm dans votre navigateur, et il est apparemment plus léger.

Je n'ai pas eu la possibilité de comparer en détails navigant et Webmake, mais j'ai remarqué que Webmake ne fonctionne pas bien avec les modules en interne en utilisant des variables globales telles que socket.io (qui est plein de bloat de toute façon IMO).

Je serais prudent à propos de RequireJS, ce qui a été recommandé ci-dessus. Parce qu'il s'agit d'un chargeur AMD , votre navigateur va charger vos fichiers JS de manière asynchrone. Cela entraînera plus d'échanges entre votre client et votre serveur et pourrait dégrader l'UX des personnes qui naviguent à partir de réseaux mobiles / sous WiFi incorrect. En outre, si vous réussissez à garder votre code JS simple et minuscule, un chargement asynchrone n'est absolument pas nécessaire!

Vous voudrez peut-être consulter http://jspm.io/ qui est un gestionnaire de paquetage de navigateur. Possède un bon support ES6 aussi.