Comment puis-je utiliser NPM pour les dépendances frontales?
Je tiens à demander si cela est possible (et généralement une bonne idée) d'utiliser NPM pour gérer les dépendances frontales (backbone, jQuery).
J'ai trouvé que la colonne vertébrale, JQuery et ainsi de suite sont toutes disponibles via NPM, mais je devrais définir un autre point d'extraction (la valeur par défaut est node_modules) ou lien symbolique ou autre chose ...
Quelqu'un a-t-il déjà fait cela?
Est-il possible?
Qu'est-ce que je dois changer dans package.json?
Réponse courte: sorte de .
Il est en grande partie à l'auteur du module à l'appui, mais il est pas commun. Socket.io est un exemple d'un tel module de support, comme montré sur la page de destination. Il existe d'autres solutions cependant. Ce sont les deux que je sais quoi que ce soit au sujet de:
- http://ender.no.de/ - Ender JS, analogue de NPM décrit lui-même pour les modules clients. Un peu trop impliqué pour mes goûts.
- https://github.com/substack/node-browserify - Browserify, un utilitaire qui va marcher vos dépendances et vous permettent de produire un seul script en émulant le modèle module de Node.js. Vous pouvez utiliser un jake | script make build cracher vos application.js, et même automatiser si vous voulez obtenir la fantaisie | gâteau | râteau. Je brièvement, mais décidé qu'il était un peu maladroit, et est devenu gênant pour le débogage. En outre, tous les modules NPM double environnement aiment être exécuté par browserify.
Personnellement, je participerai actuellement à l'aide RequireJS ( http://requirejs.org/ ) et de gérer manuellement mes modules, semblable à Mozilla fait avec leur exemple d'application BrowserQuest ( https://github.com/mozilla/BrowserQuest ). Notez que cela vient avec le défi d'avoir des modules potentiellement shim comme épine dorsale ou underscore qui a supprimé le soutien pour les chargeurs de modules de style AMD. Vous pouvez trouver un exemple de ce qui est impliqué dans calant ici: http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript
En réalité, il semble que ça va faire du mal, peu importe ce qui est la raison pour laquelle le soutien du module natif est un sujet brûlant.
+1 pour utiliser la navigation de navigation. Nous l'utilisons ici chez diy.org et l'aime. La meilleure introduction et le raisonnement derrière la navigation de navigation peuvent être trouvés dans le Manuel de navigation . Les sujets tels que les solutions COMVONJS & AMD, les pipelines et les tests de construction sont couverts là-bas.
La principale raison de la navigation de navigation fonctionne si bien est-ce que cela fonctionne de manière transparente avec NPM. Tant que le module peut être nécessaire, il peut être marqué (bien que tous les modules ne soient pas effectués pour fonctionner dans le navigateur).
Principes de base:
npm install jquery-browserify
main.js
var $ = require('jquery-browserify');
$("img[attr$='png']").hide();
Puis exécutez:
browserify main.js > bundle.js
Ensuite, inclure bundle.js Dans votre DOC HTML et le code dans main.js sera exécuté.
Notre équipe maintient un outil appelé Lineman pour la construction de projets frontaux. L'outil est basé sur des nœuds, donc un projet repose sur de nombreux modules NPM fonctionnant Server pour construire vos actifs, mais sur The-Box s'attend à trouver votre côté client dépendances de copie et engagées à vendor/js.
Cependant, un groupe de personnes (moi-même inclus) a essayé d'intégrer avec la navigation de navigation et que nous rencontrons beaucoup de complexité et de problèmes, allant de (a) des modules NPM conservés par une tierce partie qui sont obsolètes ou ajoutent modifications non désirées, à (b) les bibliothèques réelles qui commencent à échouer lorsqu'elles sont chargées traditionnellement chaque fois qu'une fonction de niveau supérieur nommée require est même définie, En raison de l'AMD/requis.js bagages.
Ma recommandation à court terme est de conserver et de coller une bonne concaténation de script à la mode jusqu'à la poussière. Jusqu'à ce que vous ayez des problèmes assez gros ou assez complexes pour y garantir, je soupçonne que vous passerez plus de temps à déboguer et à assainir votre construction que vous le feriez autrement. Et je pense que la plupart d'entre nous acceptent que la meilleure utilisation de votre temps consiste à se concentrer sur votre code d'application et non à ses outils de construction.
J'utilise personnellement Webmake pour mes petits projets. Il est une alternative à la navigation de navigation de la manière dont il apporte des dépendances NMM sur votre navigateur et il est apparemment plus léger.
Je n'avais pas l'occasion de comparer dans les détails Navigation et Webmake, mais j'ai remarqué que WebMake ne fonctionne pas bien avec des modules à l'aide de variables globales telles que Socket.io (qui est rempli de gonflement de toute façon IMO).
Je serais prudent quant aux exigences qui ont été recommandées ci-dessus. Parce que c'est un AMD Loader , votre navigateur chargera vos fichiers JS de manière asynchrone. Il induise plus d'échanges entre votre client et votre serveur et peut dégrader l'UX des personnes qui parcourent des réseaux mobiles/sous WiFi Bad WiFi. De plus, si vous réussissez à garder votre code JS simple et minuscule, le chargement asynchrone n'est absolument pas nécessaire!
Vous voudrez peut-être jeter un coup d'œil à http://jspm.io/ qui est un gestionnaire de packages de navigateur. A un bon soutien ES6 aussi.