web-dev-qa-db-fra.com

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

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

  1. Gérer mes dépendances côté client dans un format similaire à celui de npm package.json ou bower 's 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.json fichier pour les bibliothèques moins connues (npm vous permet de pointer sur git repos)
  3. Il convient de minifier et de 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> balise côté client
  4. CoffeeScript, comme BoxJS 4 (maintenant mort), devrait prendre en charge

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

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

    Ou mieux encore, faites headjs style:

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

Si aucun de ces outils n’existe, 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à étudié tous les outils que j'ai liés ici et ceux-ci ne satisfont que jusqu'à trois de mes besoins au mieux, individuellement. Alors, s'il vous plaît, ne postez pas de nouveau sur ces outils. Je n'accepterais qu'une réponse qui fournisse un seul outil qui réponde à mes 5 exigences ou si quelqu'un publie un flux de travail/script/exemple concret d'un ensemble d'outils contenant plusieurs de ces outils et répondant à toutes mes exigences. Merci.

javascriptnpmcoffeescriptdependency-management
94
pathikrit

Un autre cadre qui répond à tous mes critères publiés récemment: http://duojs.org/ (et qui permet également de traiter d’autres ressources telles que CSS comme des dépendances).

0
pathikrit

require.js fait tout ce dont vous avez besoin.

Ma réponse à this question peut vous aider

Exemple:

Hiérarchie des projets de l'application client:

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 quand elles seront précédées de "cs!". Le plugin cs compile le fichier coffeescript.

Lorsque vous entrez dans prod, vous pouvez pré-compiler votre projet entier avec r.js .

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

Voici vos exigences:

  • Gérez les dépendances côté client dans un format similaire à package.json ou composant.json de bpm. différent mais aussi bon!

  • Je devrais avoir la possibilité de pointer sur git repo ou sur des fichiers js réels (sur le Web ou localement) dans mon fichier dependency.json pour les bibliothèques moins connues (npm vous permet de pointer sur git repos). [~ # ~] oui [~ # ~]

  • Il convient de minifier et de 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 du côté client. [~ # ~] oui [~ # ~] avec r.js.

  • Il devrait avoir un soutien hors de la boîte pour coffeescript comme Box. [~ # ~] oui [~ # ~]

  • Dans le navigateur, je peux utiliser le style ou les headjs requis. [~ # ~] oui [~ # ~]

41
Jean-Philippe Leclerc

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

24
Chandra Sekhar Walajapet

En tant que @ Guillaume86, je pense qu’ils vous amèneront au plus près de l’endroit où vous voulez être.

Dans l'ourlet, les dépendances sont gérées à l'aide d'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) à coudre pour vos opérations côté client.

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

Ajout de dépendances

Utilisez npm pour rechercher une dépendance spécifique, puis modifiez le fichier package.json pour vous assurer que la dépendance est suivie à l'avenir. Ensuite, spécifiez 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 ne soit 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 à l'application/dossier. Notez que pour exposer votre script via la méthode 'require', vous devez en faire un module CommonJS. C'est très simple - voir les documents de base .

Fichiers locaux

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

CSS

Hem assemblera aussi votre CSS, si vous le souhaitez. Voir les documents de base .

Bâtiment

Une fois que vos dépendances sont répertoriées, vous pouvez utiliser l’ourlet pour les coudre ensemble.

# 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 les documents mentionnant l'épine comme vous le souhaitez ...

15
dsummersl

Eh bien, je suis surpris que personne ne mentionne Browserify pour le moment.

  1. prend en charge le format package.json
  2. utilise npm dessous qui peut utiliser un repo github (ou n’importe quel git) comme source du paquet
  3. réduit et concatène toutes les dépendances dans un seul fichier.
  4. supporte coffeescript si vous l'incluez dans vos dépendances
  5. exiger du style tout le chemin.
  6. supporte les cartes sources
11
Floby

Je suis presque sûr que Hem répond à vos exigences (j'utilise une fourchette personnelle avec des compilateurs supplémentaires - jade et stylet - il est facile de l'adapter à vos besoins). Il utilise npm pour gérer les dépendances.

9
Guillaume86

Vous voudrez peut-être jeter un coup d'œil à Yeoman, qui utilise plusieurs techniques pour vous aider à répondre à vos besoins.

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

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

Quant à vos besoins:

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

Toutes les fonctionnalités:

Échafaudage ultrarapide - Échaflez facilement de nouveaux projets avec des modèles personnalisables (par exemple, Boilerplate HTML5, Twitter Bootstrap), RequireJS, etc.

Excellent processus de construction - Non seulement vous obtenez une minification et une concaténation; J'optimise également tous vos fichiers image, HTML, compilez vos fichiers CoffeeScript et Compass. Si vous utilisez AMD, je transmettrai ces modules à l'aide de r.js afin que vous n'ayez pas à le faire.

Compiler automatiquement CoffeeScript & Compass - Notre processus de surveillance LiveReload compile automatiquement les fichiers source et actualise votre navigateur chaque fois qu'une modification est apportée afin que vous n'ayez pas à le faire.

lint automatiquement vos scripts - Tous vos scripts sont automatiquement exécutés sur JSHint afin de garantir qu'ils respectent 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.

Awesome Image Optimization - J'optimise toutes vos images avec OptiPNG et JPEGTran afin que vos utilisateurs puissent passer moins de temps à télécharger des actifs et plus de temps à utiliser votre application.

Gestion des paquets Killer - Besoin d'une dépendance? C'est juste une frappe de touche. Je vous permet de rechercher facilement de nouveaux packages via la ligne de commande (par exemple, `bower search jquery), de les installer et de les maintenir à jour sans avoir à 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 un échafaudage de test pour votre application.

5
MarcoK

Bower peut convenir à vos besoins (1) et (2) pour le reste dont vous avez besoin. Du 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 paquet:

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
4
Oualid Jabnoune

Je viens de tomber sur inject.js

Certaines des fonctionnalités, à partir du site du projet :

Inject (Apache Software License 2.0) est un moyen révolutionnaire de gérer vos dépendances de manière agnostique. Certaines de ses principales caractéristiques comprennent:

  • Conformité CommonJS dans le navigateur (exportations. *)
  • Afficher l'intégralité de la matrice de support CommonJS
  • Récupération de fichiers entre domaines (via easyXDM)
  • localStorage (charge un module une fois)
2
Veverke

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

Pour les développeurs front-end qui recherchent des ressources maintenables, Jam est un gestionnaire de paquets pour JavaScript. Contrairement aux autres référentiels, nous plaçons le navigateur en premier.

Cela ressemble beaucoup à NPM dans son fonctionnement.

Installez le paquet 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

Des dépendances de confiture peuvent être ajoutées dans package.json fichier.

Pour une documentation complète, lisez Documentation sur le bourrage

2
himanshu

Départ cartero si vous utilisez node/express sur le backend.

1
Brave Dave

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 demande supplémentaire.

Implémentation démo pure de clientside: 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 fonction require est générée pour ce paquet. Le paquet contient tous les fichiers que votre application pourrait nécessiter. Aucune autre requête http n'est effectuée car le paquet regroupe toutes les dépendances. C’est aussi proche que possible du style Node.js requis par le client.

La structure du package est la suivante:

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

Contrairement à Node, un paquet ne connaît pas son nom externe. Il appartient au pacakge, y compris la dépendance, de le nommer. Ceci fournit une encapsulation complète.

Compte tenu de toute cette configuration, voici une fonction qui charge un fichier depuis un paquet:

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 certaines variables auxquelles les modules ont accès.

Une fonction require est exposée aux modules, ils 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 dans le contexte.

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

1
Daniel X Moore

J'utilise hem avec npm et je voulais ajouter quelques avantages supplémentaires qui, à mon avis, n'étaient pas couverts jusqu'à présent.

  • Hem a un serveur Web autonome (strates) vous permettant de développer votre code sans même avoir besoin de recompiler. Je n'utilise jamais hem 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 de coffeescript arbitraires si vous configurez correctement slug.json. Voici l'un de mes paquets auto-compilés 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 de votre système local avec npm link et de les combiner de manière transparente, même lorsque vous utilisez le serveur Strata. En fait, vous n'avez même pas besoin d'utiliser la méthode cake ci-dessus, vous pouvez simplement créer un lien direct vers Coffeescript à partir de projets dépendants.
  • Hem supporte eco (Coffeescript intégré) pour les vues et Stylus pour CSS, et compile tout cela, ainsi que votre Coffeescript, dans un fichier JS et un fichier CSS.

Voici une liste de base pour la configuration avec une application Spine, hem, coffeescript. N'hésitez pas à ignorer les parties de la colonne vertébrale. En fait, j'utilise parfois spine app Pour configurer une structure de répertoires pour une application autre que Spine, puis modifiez slug.json Pour passer à une structure de compilation différente.

  1. Installez NPM: curl http://npmjs.org/install.sh | sh Sur un système * nix. Je suppose que c'est disponible depuis la ligne de commande.
  2. Installez-les globalement (npm install -g hem). Le développement a ramifié récemment, vous voudrez peut-être le sortir directement de github ( https://github.com/spine/hem ), extrayez une branche et npm install -g . Dans ce dossier.
  3. npm install -g spine.app Rendra la colonne vertébrale disponible sous forme de commande globale
  4. spine app folder Créera un projet Spine appelé app dans folder, générant la structure de répertoires appropriée et un ensemble de fichiers squelettes à démarrer.
  5. cd dans le dossier et éditez dependencies.json pour les bibliothèques dont vous avez besoin. Ajoutez-les à slug.json Pour qu'ils sachent également où les trouver.
  6. Facultatif: npm link N’importe lequel de vos paquets locaux en cours de développement sur node_modules, Et vous pouvez les ajouter à slug.json Pour obtenir un index.js À inclure directement ou un index.coffee si vous voulez le compiler.)
  7. npm install . Pour télécharger toutes les dépendances que vous venez de saisir.

  8. Si vous regardez la configuration par défaut de la colonne vertébrale, il y a un app/lib/setup.coffee Dans lequel vous require toutes 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/setup Et chargez le contrôleur principal de votre application. De plus, vous devez require toutes les autres classes de ces autres contrôleurs. Vous pouvez utiliser spine controller something Ou spine model something Pour 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 le nœud require du nœud:

    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.html Conviendra généralement au chargement de votre application, mais modifiez-la si nécessaire. Selon vos besoins, il n’ajoute qu’un fichier js et un fichier css, que vous n’aurez jamais besoin de modifier.

  11. Editez vos fichiers de stylet si nécessaire dans le dossier css. C'est beaucoup plus flexible que CSS :)
  12. À partir de folder, exécutez hem server Pour démarrer un serveur de base, puis accédez à localhost:9294 Pour voir votre application. (Si vous l'avez installé globalement.) Il contient des arguments cachés, par exemple --Host 0.0.0.0 Écoute sur tous les ports.
  13. Construisez le reste de votre application en utilisant les techniques MVC appropriées et utilisez un stylet pour CSS et un environnement éco pour les vues. Ou n'utilisez pas du tout Spine, et ourlet fonctionnera toujours très bien avec Coffeescript et npm. Il existe de nombreux exemples de projets utilisant les deux modèles.

Encore une chose: normalement, hem server Sera mis à jour automatiquement à mesure que vous mettez à jour votre code et enregistrez les fichiers, ce qui en fait un jeu d'enfant à déboguer. L'exécution de hem build Compilera votre application en deux fichiers, application.js, Qui est minifié et application.css. Si vous exécutez hem server Après cela, il utilisera ces fichiers et ne se mettra plus à jour automatiquement. Donc, ne faites pas hem build Tant que vous n'avez pas réellement besoin d'une version abrégée de votre application pour le déploiement.

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

1
Andrew Mao

Il y a plusieurs options:

Composant peut également présenter un intérêt, il ne gère pas les dépendances en tant que telles, mais vous permet d'utiliser des versions hachées de bibliothèques par ailleurs volumineuses.

1
JoelKuiper

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

asynchronous-frontend-dependency-management-without-AMD

0
fantasyni

Je suggérerais de consulter le dojo toolkit 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 compilation ici:

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

Pour mémoire, la version bêta 1.9 devrait être disponible le mois prochain.

0
Christophe