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

Question

Bien qu'il existe d'excellentes solutions pour gérer les dépendances sur le côté serveur, je ne pouvais pas trouver un qui répond à tous mes besoins cohérent côté client javascript dépendance de gestion des flux de travail. Je tiens à répondre à ces 5 exigences:

1. Gérer mon côté client dépendances dans un format similaire à des mnp paquet.json ou charmille's bower.json
2. Je devrais avoir la souplesse nécessaire pour point de repo git ou réels, js fichiers (que ce soit sur le web ou en local), dans ma dépendance.fichier json pour les moins connus des bibliothèques (npm vous laisse point de repos git)
3. Il devrait rapetisser et l'espace de toutes les bibliothèques dans un seul fichier comme ender - c'est le seul fichier js j'aurais besoin de la mettre dans mon script dans la balise côté client
4. Il doit avoir de support de la boîte de coffeescript comme Boîte

5. Dans le navigateur, je peux utiliser soit exiger style:

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

   Ou mieux encore, de le faire headjs style:

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

Si pas d'un tel outil existe, quelle est la meilleure combinaison d'outils, à savoir un outil de la chaîne que je peux combiner à l'aide de quelque chose comme volo (ou grunt)?

J'ai déjà fait des recherches tous les outils que j'ai associé dans l'ici et ils ne satisfont qu'à 3 de mes besoins, au mieux, individuellement. Donc, merci de ne pas poster de nouveau sujet de ces outils. Je tiens seulement à accepter une réponse qui fournit un outil unique qui répond à tous les 5 de mes besoins ou si quelqu'un poste un béton de workflow/script/exemple de fonctionnement d'une chaîne de traitement de plusieurs de ces outils qui répond à toutes mes exigences. Je vous remercie.

Answer 1

require.js ne tout ce dont vous avez besoin.

Ma réponse à cette question peut vous aider à

Exemple:

Client application de la hiérarchie du projet:

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

main.js est l'endroit où vous initialisez votre application client et configurer 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
});

Dépendances utiliser la cs plug-in lorsque préfixé par "cs!". Le cs plugin compile le coffeescript fichier.

Quand vous allez en prod, vous pouvez pré-compiler l'intégralité de votre projet avec r.js.

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

Voici vos exigences:

• Gérer mon côté client dépendances dans un format similaire à des mnp package.json ou charmille du composant.json. Différent mais AUSSI BON!

• Je devrais avoir la souplesse nécessaire pour point de repo git ou réelle js les fichiers (que ce soit sur le web ou en local), dans ma dépendance.fichier json pour moins connus des bibliothèques (npm vous laisse point de repos git). OUI

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

• Il doit avoir de support de la boîte de coffeescript comme une Boîte. OUI

• Dans le navigateur, je peux utiliser soit exiger de style ou headjs. OUI

Answer 2

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

Answer 3

@Guillaume86 je pense que l'ourlet, vous obtiendrez la plus proche de l'endroit où vous voulez être.

Dans l'ourlet dépendances sont gérées à l'aide d'une combinaison de la ngp et de l'ourlet. Utiliser npm installer explicitement de tous vos projets de dépendances externes. Utilisation ourlet de spécifier les dépendances (externe et local), qui devrait être cousues ensemble pour vous côté client des opérations.

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

L'ajout de dépendances

Utiliser npm à la recherche d'une dépendance et ensuite modifier le package.json dossier pour s'assurer que la dépendance est suivi dans l'avenir. Spécifiez ensuite l' dépendance pour votre application dans slug.json.

Par exemple, supposons que vous vouliez ajouter le café-script de dépendance. Juste utiliser npm pour installer la dépendance et de l'enregistrer sur votre colis.fichier json:

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

Supposons que je voulais inclure votre propre module 'bloomfilters", et il n'était pas dans le mécanisme national de prévention de registre. 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 des ces fichiers dans le dossier app/ dossier. Notez que pour exposer votre script via le 'besoin' méthode vous devez faire un CommonJS module. C'est très simple: voir l'ourlet docs.

Les fichiers locaux

Si vous souhaitez inclure les non-CommonJS non "requiert" code vous pouvez également point que en référençant votre javascript personnalisé ou coffeescript via le 'libs' liste dans slug.json.

CSS

Ourlet va piquer votre CSS, si vous le souhaitez. Voir l'ourlet docs.

Bâtiment

Une fois que vous avez votre liste des dépendances, vous pouvez utiliser l'ourlet à couture tous ensemble.

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

Notes

Hem a été signifié pour les spinejs projet - mais vous n'avez pas avoir à l'utiliser. Ignorer les docs de mentionner la colonne vertébrale comme vous le souhaitez...

Answer 4

Eh bien, je suis surpris que personne ne mentionned Browserify encore.

1. supporte le format package.json
2. NGP utilisations sous lesquels peut utiliser un github (ou n’importe quel git) repo comme source du package
3. minifies 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. besoin de style complètement.
6. prend en charge les cartes de la source

Answer 5

Je suis sûr que Hem à vos besoins (j’utilise une fourchette personnelle avec d’autres compilateurs - jade et stylet - il est facile de personnaliser à vos besoins). Il utilise du Musée pour gérer depedencies.