Javascript dépendance dépendance gestion et empaquetage

Question

J'essaie de comprendre comment gérer au mieux les dépendances de fichiers Javascript et que cela conduise l'emballage d'une application frontale 100%. En bref, je construis une application en utilisant backbone.js avec d'autres bibliothèques. Je veux une base de code organisée et j'aimerais pouvoir déclarer des dépendances dans chaque fichier. Idéalement, ces déclarations devraient a) piloter l'ordre dans lequel les fichiers sont chargés par le navigateur (en cours de développement, je veux charger les fichiers séparément) et piloter l'ordre dans lequel les scripts d'encapsulation chargent les scripts pour la concaténation (je vise un seul fichier pour l'application entière).

J'ai lu sur requirejs et commonjs mais je ne suis pas convaincu.

J'ai un simple script shell qui utilise maintenant cat <file> <file> <file> <file> > concatenated.file pour faire ce que je veux, mais c'est une douleur de maintenir cette liste de fichiers à jour et dans le bon ordre. Il serait beaucoup plus facile de déclarer la dépendance au début de chaque fichier javascript et de faire en sorte que l'empaqueteur et les chargeurs utilisent intelligemment cette information pour concaténer/charger des scripts.

Des suggestions?

Merci vous,

Luis

Answer 1

Pour frontend applications complexes Format Asynchronous Module Définition (AMD) est le meilleur choix. Et c'est beaucoup de grands chargeurs qui supporte AMD (curl.js, RequireJS).

Je recommande cet article pour en savoir plus sur les approches modernes en javascript gestion dependecy:

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

Why AMD?

Pour les emballages prennent en compte CommonJS spécifications, il y a quelques implémentations et il est une question de goût , mais en tout cas, je recommande de choisir des outils, ce qui est conforme à certaines de ces spécifications.

Answer 2

Je suis parti de voler moi-même. Cela fait partie de JavascriptMVC mais aucune raison pour laquelle vous ne pouvez pas l'utiliser avec Backbone.js

La bonne chose à propos de celui-ci est qu'il construit votre application pour la production, y compris la réduction de vos css et js et bien emballer tout cela en 2 fichiers: production.css et production.js.

Il peut gérer le chargement de fichiers non JS aussi, donc vous pouvez faire des choses comme voler ('somefile.css'). Then (function() {...});

Pour les fichiers, il est très bien comme vous le feriez dans d'autres langues:

steal(dep1, dep2, dep3).then(function() { 
    // code 
}); 

Answer 3

Ce serait beaucoup plus facile de pouvoir déclarer la dépendance au début de chaque fichier javascript et ont le L'emballeur et les chargeurs peuvent utiliser ces informations intelligemment pour concaténer/charger des scripts.

J'ai eu la même idée il y a plusieurs mois et travaillent sur un résolveur de dépendance pour mon Resource Builder ce qui rend déjà plus facile pour moi (y compris la nécessité de distinuish entre le développement et la version déployée, avec le paramètre debug en option) .

JsDoc Toolkit (et efforts connexes), cette syntaxe est prise en charge e. g. par Eclipse JSDT, fournit une balise @requires, de sorte que vous pouvez utiliser cela. Mais la résolution des dépendances n'est toujours pas une tâche triviale (comme vous pouvez le voir dans ResourceBuilder::resolveDeps()). (Le but ultime est d'utiliser l'analyse de code statique pour résoudre les dépendances automatiquement, sans aucune balise.)

Cela réduirait le courant

<script type="text/javascript" src="builder?src=object,types,dom,dom/css"></script> 

à une simple

<script type="text/javascript" src="builder?src=dom/css"></script> 

Comme pour les chargeurs asynchrones : La bonne chose à propos des chargeurs asynchrones est qu'ils sont rapides. La mauvaise chose à propos des chargeurs asynchrones est que - s'ils fonctionnent; ils sont tous basés sur une approche non standard - ils sont si rapides que vous ne pouvez pas être sûr que les fonctionnalités fournies par les scripts sont disponibles dans les scripts suivants. Donc, vous devez avoir votre code exécuté par leurs auditeurs. Je recommande de les éviter sauf si vous avez vraiment des fonctionnalités dans votre application qui ne sont nécessaires que sur demande.