Comment gérer les dépendances JavaScript côté client? [fermé]

Bien qu'il existe d'excellentes solutions pour gérer les dépendances côté serveur, je n'en ai trouvé aucune qui réponde à tous mes besoins pour avoir un workflow de gestion des dépendances JavaScript côté client cohérent. Je souhaite répondre à ces 5 exigences:

1. Gérer mes dépendances côté client dans un format similaire à NPM de package.json ou Bower d »bower.json
2. Il devrait avoir la possibilité de pointer vers git repo ou des fichiers js réels (sur le Web ou localement) dans mon dependency.jsonfichier pour les bibliothèques moins connues (npm vous permet de pointer vers git repos)
3. Il devrait minimiser et nommer toutes les bibliothèques dans un seul fichier comme ender - c'est le seul fichier js que j'aurais besoin de mettre dans ma <script>balise côté client
4. Il devrait avoir un support prêt à l'emploi pour CoffeeScript comme BoxJS 4 (maintenant mort)

5. Dans le navigateur, je devrais pouvoir utiliser soit le style requis :

   var $ = require('jquery');
   var _ = require('underscore');

   Ou mieux encore, faites le style headjs :

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });

S'il n'existe aucun outil unique de ce type, quelle est la meilleure combinaison d'outils, c'est-à-dire une chaîne d'outils que je peux combiner en utilisant quelque chose comme volo (ou grunt )?

J'ai déjà recherché tous les outils auxquels je me suis associé ici et ils ne satisfont que jusqu'à 3 de mes exigences au mieux individuellement. Alors, veuillez ne pas publier à nouveau sur ces outils. Je n'accepterais qu'une réponse qui fournisse un seul outil qui répond à mes 5 exigences ou si quelqu'un publie un exemple de flux de travail / script / de travail concret d'une chaîne d'outils de plusieurs de ces outils qui répond également à toutes mes exigences. Je vous remercie.

require.js fait tout ce dont vous avez besoin.

Ma réponse à cette question peut vous aider

Exemple:

Hiérarchie du projet d'application cliente:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js est l'endroit où vous initialisez votre application cliente et configurez require.js:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

Les dépendances utiliseront le plugin cs lorsque précédé de "cs!". Le plugin cs compile le fichier coffeescript.

Quand vous allez en prod, vous pouvez pré-compiler votre projet entier avec r.js .

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

Voici vos besoins:

• Gérez mes dépendances côté client dans un format similaire à package.json de npm ou component.json de bower. Différent mais aussi bon!

• Je devrais avoir la possibilité de pointer vers git repo ou des fichiers js réels (sur le Web ou localement) dans mon fichier dependency.json pour les bibliothèques moins connues (npm vous indiquons les dépôts git). OUI

• Il devrait minimiser et nommer toutes les bibliothèques dans un seul fichier comme ender - c'est le seul fichier js que j'aurais besoin de mettre dans mon script-tag côté client. OUI avec r.js.

• Il devrait avoir un support prêt à l'emploi pour coffeescript comme Box. OUI

• Dans le navigateur, je peux utiliser require style ou headjs. OUI

http://requirejs.org/ est celui que vous recherchez je crois

En tant que @ Guillaume86, je pense que l'ourlet vous mènera au plus près de l'endroit où vous voulez être.

Dans les dépendances de l'ourlet sont gérées en utilisant une combinaison de npm et d'ourlet. Utilisez npm pour installer explicitement toutes les dépendances externes de vos projets. Utilisez hem pour spécifier les dépendances (externes et locales) à assembler pour vos opérations côté client.

J'ai créé un projet squelette pour que vous puissiez voir comment cela fonctionnerait - vous pouvez le voir sur https://github.com/dsummersl/clientsidehem

Ajouter des dépendances

Utilisez npm pour rechercher une dépendance spécifique, puis modifiez le fichier package.json pour vous assurer que la dépendance sera suivie à l'avenir. Spécifiez ensuite la dépendance de votre application dans slug.json.

Par exemple, supposons que vous vouliez ajouter la dépendance coffee-script. Utilisez simplement npm pour installer la dépendance et enregistrez-la dans votre fichier package.json:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

Supposons que vous vouliez inclure votre propre module 'bloomfilters' et qu'il n'était pas dans le registre npm. Vous pouvez l'ajouter à votre projet de la manière suivante:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

Modules locaux

Si vous souhaitez inclure votre propre café ou javascript, vous pouvez le faire en ajoutant ces fichiers au dossier app /. Notez que pour exposer votre script via la méthode 'require', vous devez en faire un module CommonJS. C'est très simple - voir la documentation sur l'ourlet .

Fichiers locaux

Si vous souhaitez inclure du code non-CommonJS non "requis", vous pouvez également l'assembler en référençant votre javascript ou coffeescript personnalisé via la liste "libs" dans slug.json.

CSS

Hem assemblera également votre CSS, si vous le souhaitez. Voir la documentation sur l'ourlet .

Bâtiment

Une fois que vous avez répertorié vos dépendances, vous pouvez utiliser l'ourlet pour les assembler.

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

Remarques

Hem était destiné au projet spinejs - mais vous n'êtes pas obligé de l'utiliser pour cela. Ignorez tous les documents mentionnant la colonne vertébrale comme vous le souhaitez ...

Eh bien, je suis surpris que personne n'ait encore mentionné Browserify .

1. prend en charge le format package.json
2. utilise npm en dessous qui peut utiliser un dépôt github (ou n'importe quel git) comme source de paquet
3. minifie et concatène toutes les dépendances dans un seul fichier.
4. prend en charge coffeescript si vous l'incluez dans vos dépendances
5. nécessitent du style tout le long.
6. prend en charge les cartes source

Je suis presque sûr que Hem répond à vos besoins (j'utilise un fork personnel avec des compilateurs supplémentaires - jade et stylet - il est facile à personnaliser selon vos besoins). Il utilise npm pour gérer les dépendances.

Vous voudrez peut-être jeter un oeil à Yeoman , qui utilise plusieurs techniques pour vous aider avec vos besoins.

Notre flux de travail comprend trois outils pour améliorer votre productivité et votre satisfaction lors de la création d'une application Web: yo (l'outil d'échafaudage), grunt (l'outil de création) et bower (pour la gestion des packages).

Prise en charge intégrée de CoffeeScript, Compass et plus encore. Fonctionne avec r.js ( RequireJS ), unittesting etc.

Quant à vos exigences:

1. Bower est utilisé pour la gestion des dépendances
2. Bower peut travailler avec des fichiers locaux, git: //, http: // et plus
3. Support intégré pour la minification et la concaténation (même pour vos images)
4. Prise en charge intégrée pour compiler automatiquement CoffeeScript et Compass (avec LiveReload)
5. Comme indiqué dans le processus de construction: si vous utilisez AMD, je passerai ces modules via r.js pour que vous n'ayez pas à le faire.

Toutes les fonctionnalités:

Échafaudages ultra-rapides ultra - facilement de nouveaux projets avec des modèles personnalisables (par exemple, HTML5 Boilerplate, Twitter Bootstrap), RequireJS et plus encore.

Excellent processus de construction - Non seulement vous obtenez la minification et la concaténation; J'optimise également tous vos fichiers image, HTML, compile vos fichiers CoffeeScript et Compass, si vous utilisez AMD, je passerai ces modules via r.js pour que vous n'ayez pas à le faire.

Compilez automatiquement CoffeeScript et CompassCompilez - Notre processus de surveillance LiveReload compile automatiquement les fichiers sources et actualise votre navigateur chaque fois qu'une modification est apportée pour que vous n'ayez pas à le faire.

Lint automatiquement vos scripts - Tous vos scripts sont automatiquement exécutés sur JSHint pour s'assurer qu'ils suivent les meilleures pratiques linguistiques.

Serveur de prévisualisation intégré - Plus besoin de lancer votre propre serveur HTTP. Mon intégré peut être déclenché avec une seule commande.

Optimisation d'image impressionnante - J'optimise toutes vos images à l'aide d'OptiPNG et de JPEGTran afin que vos utilisateurs puissent passer moins de temps à télécharger des ressources et plus de temps à utiliser votre application.

Gestion des packages Killer - Besoin d'une dépendance? C'est juste à une touche. Je vous permet de rechercher facilement de nouveaux paquets via la ligne de commande (par exemple `bower search jquery), de les installer et de les maintenir à jour sans avoir besoin d'ouvrir votre navigateur.

Tests unitaires PhantomJS - Exécutez facilement vos tests unitaires dans WebKit sans tête via PhantomJS. Lorsque vous créez une nouvelle application, j'inclus également une structure de test pour votre application.

Bower peut convenir à vos besoins (1) et (2) pour le reste dont vous avez besoin. Depuis le readme:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

Pour installer un package:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

Regardez le gestionnaire de paquets Jam . Voici la description de sa page d'accueil

Pour les développeurs frontaux qui recherchent des ressources maintenables, Jam est un gestionnaire de packages pour JavaScript. Contrairement aux autres référentiels, nous mettons le navigateur en premier.

Cela ressemble beaucoup à npm dans son fonctionnement.

Installez le package comme ci-dessous

jam install backbone

garder les paquets à jour en exécutant

jam upgrade
jam upgrade {package} 

Optimiser les packages pour la production

jam compile compiled.min.js

Les dépendances Jam peuvent être ajoutées dans le package.jsonfichier.

Pour une documentation complète, lisez la documentation Jam

Je viens de tomber sur inject.js

Certaines des fonctionnalités, du site du projet :

Inject (Apache Software License 2.0) est un moyen révolutionnaire de gérer vos dépendances d'une manière indépendante de la bibliothèque. Certaines de ses principales caractéristiques comprennent:

• Conformité CommonJS dans le navigateur (exportations. *)
• Afficher la matrice de support CommonJS complète
• Récupération interdomaine de fichiers (via easyXDM)
• localStorage (charger un module une fois)

Il existe plusieurs options:

• http://browserify.org/ qui vous permet d'importer des modules
• RequireJS résout le même problème
• JoinJS est celui qui semble être en développement actif

Le composant peut également être intéressant, il ne gère pas les dépendances en soi, mais vous permet d'utiliser des versions hachées de bibliothèques autrement volumineuses.

J'utilise ourlet avec npm, et je voulais ajouter des avantages supplémentaires qui, je pense, n'étaient pas couverts jusqu'à présent.

• Hem a un serveur Web autonome (strates) afin que vous puissiez développer votre code sans même avoir besoin de recompiler. Je n'utilise jamaishem build sauf si je publie une application.
• Vous n'avez pas besoin d'utiliser Spine.js pour utiliser hem, vous pouvez l'utiliser pour compiler des packages coffeescript arbitraires si vous avez correctement configuré slug.json. Voici l'un de mes packages compilé automatiquement avec cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• En parlant de ce qui précède, hem vous permet de lier d'autres dépendances sur votre système local avec npm link et les combine de manière transparente même lorsque vous utilisez le serveur strata. En fait, vous n'avez même pas besoin d'utiliser lecake méthode ci-dessus, vous pouvez simplement créer un lien direct vers coffeescript à partir de projets dépendants.
• Hem prend en charge eco(Coffeescript intégré) pour les vues et Stylus pour CSS, et compile tout cela, avec votre Coffeescript, dans un fichier JS et un fichier CSS.

Voici une liste de base pour la configuration avec une application Spine, ourlet, coffeescript. N'hésitez pas à ignorer les parties de la colonne vertébrale. En fait, j'utilise parfois spine apppour configurer une structure de répertoires pour une application non-Spine, puis j'édite slug.jsonpour passer à une structure de compilation différente.

1. Installez NPM: curl http://npmjs.org/install.sh | shsur un système * nix. Je suppose qu'il est disponible à partir de la ligne de commande.
2. Installez l'ourlet globalement ( npm install -g hem). Le développement s'est ramifié ces derniers temps, vous voudrez peut-être le sortir directement de github ( https://github.com/spine/hem ), extraire une branche et npm install -g .dans ce dossier.
3. npm install -g spine.app rendra spine disponible en tant que commande globale
4. spine app folderfera un projet de la colonne vertébrale appelé appà folder, générer la bonne structure de répertoire et un tas de fichiers squelette pour commencer.
5. cddans le dossier et modifiez dependencies.jsonles bibliothèques dont vous avez besoin. Ajoutez-les pour slug.jsonque l'ourlet sache également où les trouver.
6. Facultatif: npm linkn'importe lequel de vos packages locaux en développement dans node_modules, et vous pouvez les ajouter à slug.jsonfor hem (soit un index.jspour l'inclure directement, soit un index.coffeesi vous voulez que Hem le compile.)
7. npm install . pour télécharger toutes les dépendances que vous venez de saisir.

8. Si vous jetez un œil à la configuration de spine par défaut, app/lib/setup.coffeevous trouverez requiretoutes les bibliothèques dont vous avez besoin à partir de vos dépendances. Exemples:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'

9. Dans index.coffee, vous venez de require lib/setupcharger le contrôleur principal de votre application. De plus, vous avez besoin de requiretoutes les autres classes de ces autres contrôleurs. Vous pouvez utiliser spine controller somethingou spine model somethingpour générer des modèles pour les contrôleurs et les modèles. Le contrôleur Spine typique ressemble à ce qui suit, en utilisant les nœuds require:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header

10. La valeur par défaut générée index.htmlconvient généralement pour charger votre application, mais modifiez-la si nécessaire. Selon vos besoins, il extrait uniquement un jset un cssfichier, que vous n'avez jamais besoin de modifier.

11. Modifiez vos fichiers de stylet si nécessaire dans le cssdossier. C'est beaucoup plus flexible que CSS :)
12. De folder, exécutez hem serverpour démarrer un serveur Hem et accédez à localhost:9294pour voir votre application. (Si vous avez installé hem globalement.) Il a des arguments cachés, par exemple--host 0.0.0.0 écoute sur tous les ports.
13. Créez le reste de votre application en utilisant les techniques MVC appropriées et utilisez le stylet pour CSS et eco pour les vues. Ou n'utilisez pas du tout Spine, et l'ourlet fonctionnera toujours très bien avec Coffeescript et npm. Il existe de nombreux exemples de projets utilisant les deux modèles.

Une dernière chose: normalement, se hem servermettra à jour automatiquement lorsque vous mettez à jour votre code et enregistrez les fichiers, ce qui facilite le débogage. L'exécution hem buildcompilera votre application en deux fichiers application.js, qui sont minifiés et application.css. Si vous exécutez hem serveraprès cela, il utilisera ces fichiers et ne se mettra plus à jour automatiquement. Donc, pas hem buildavant d'avoir réellement besoin d'une version minifiée de votre application pour le déploiement.

Références supplémentaires: Spine.js & hem pour commencer

Voici une solution qui adopte une approche très différente: regrouper tous les modules dans un objet JSON et exiger des modules en lisant et en exécutant le contenu du fichier sans demandes supplémentaires.

Implémentation de démonstration pure clientide: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / require dépend de la disponibilité d'un package JSON au moment de l'exécution. La requirefonction est générée pour ce package. Le package contient tous les fichiers dont votre application pourrait avoir besoin. Aucune autre requête http n'est effectuée car le package regroupe toutes les dépendances. C'est aussi proche que possible du style Node.js requis sur le client.

La structure du package est la suivante:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

Contrairement à Node, un package ne connaît pas son nom externe. C'est au pacakge, y compris la dépendance, de le nommer. Cela fournit une encapsulation complète.

Compte tenu de toute cette configuration, voici une fonction qui charge un fichier à partir d'un package:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

Ce contexte externe fournit des variables auxquelles les modules ont accès.

Une requirefonction est exposée à des modules et peuvent donc nécessiter d'autres modules.

Des propriétés supplémentaires telles qu'une référence à l'objet global et certaines métadonnées sont également exposées.

Enfin, nous exécutons le programme dans le module et le contexte donné.

Cette réponse sera très utile à ceux qui souhaitent avoir une instruction de type node.js synchrone dans le navigateur et ne sont pas intéressés par les solutions de chargement de scripts à distance.

Vérifiez cartero si vous utilisez node / express sur le backend.

Je suggérerais de consulter la boîte à outils dojo qui semble répondre à la plupart de vos besoins. Celui dont je ne suis pas sûr est CoffeeScript.

dojo fonctionne avec des modules écrits au format AMD (Asynchronous Module Definition). Il a un système de construction avec des packages et vous pouvez les agréger dans un ou plusieurs fichiers (appelés couches). Apparemment, il accepte les dépôts de type git, plus de détails sur le système de construction ici:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

Pour mémoire, la version bêta de la v1.9 est attendue le mois prochain.

Un autre framework qui satisfait à tous mes critères publié récemment: http://duojs.org/ (et prend également en charge le traitement d'autres ressources comme CSS comme des dépendances).

l'injection de dépendances avec chargement asynchrone + browserify sera un autre bon choix, comparé à requirejs

gestion-des-dépendances-asynchrones-frontales-sans-AMD