JSBuilder 2

JSBuilder est un outil développé par l'équipe d'ExtJS pour packager des fichiers Javascript et des feuilles de style CSS. Il compresse les fichiers (avec YUI Compressor) et les concatène, ce qui vous permet de réduire le nombre de ressources à inclure dans vos page HTML et donc d'améliorer le temps de chargement de vos pages. En utilisant ce programme, on peut également répartir son code JS et ses règles CSS dans plusieurs petits fichiers qui peuvent être chargés plus facilement dans un IDE.

Le logiciel ajoute également une mention de copyright aux fichiers produits et peut copier des ressources (fichiers images par exemple) pour créer un package complet pour le déploiement de l'application.

Installation

Il suffit de télécharger l'archive et de la décompresser dans un répertoire de votre choix. L'outil est développé en Java et se présente sous la forme d'un fichier JAR, il faut donc avoir un runtime Java installé sur votre machine.

Créer un fichier de configuration

Vous devez ensuite créer un fichier de configuration. Le fichier doit porter l'extension jsb2 et il utilise la notation JSON. Le détail des différentes options de configuration est fourni dans l'archive (fichier JSB2FileFormat.txt). Vous pouvez également la consulter en ligne sur le site d'ExtJS.

Normalement, le fichier ext-jsb2.jsb2 aurait du être inclus dans la distribution de Ext JS 3.0.0, mais l'équipe d'ExtJS a oublié de le joindre. Il peut cependant être téléchargé dans le forum. Vous pouvez l'utiliser comme point de départ pour construire votre version personnalisé d'ExtJS.

Exemple d'utilisation

Voici un exemple de fichier de configuration qui permet de créer un package qui inclus ext-base.js, ext-all.js et ext-lang-fr.js :

{
    projectName: 'MonProjet',
    deployDir: 'public/deploy/',
    licenseText: 'MonProjet\nCopyright(c) 2009 MonOrganisation',
    pkgs: [{
        name: 'MonProjet JS Library',
        file: 'mon-projet.js',
        fileIncludes: [{
            text: 'ext-base.js',
            path: 'jsbuilder/js/ext/'
        }, {
            text: 'ext-all.js',
            path: 'jsbuilder/js/ext/'
        }, {
            text: 'ext-lang-fr.js',
            path: 'jsbuilder/js/ext/'
        }],
        resources: [{
            src: 'resources/',
            dest: 'resources/',
            filters: ".*"
        }]
   },

En utilisant ce fichier de configuration, JS Builder va créer les fichiers mon-projet.js et mon-projet-debug.js dans le répertoire public/deploy/. Le premier fichier est la version compressée qui sera utilisée sur le serveur de production, alors que le fichier avec le suffixe -debug, non compressé, pourra être utilisé sur le poste de développement.

Options de la ligne de commande

Il y a deux options de ligne de commande qui doivent obligatoirement être passées au programme. Il y a le nom du fichier projet (projectFile) et le répertoire de travail (homeDir). Ce dernier sert de base pour les chemins relatifs (deployDir par exemple) spécifiés dans le fichier de configuration.

Les autres options de la ligne de commande sont détaillées ici.

Exemple de ligne de commande :

C:\WINDOWS\system32\java.exe -jar "C:\Program Files\JS Builder\JSBuilder2.jar"
--projectFile C:\wamp\www\mon-projet\mon-projet.jsb2 --homeDir C:\wamp\www\mon-projet\

Dépendances

Avec les options includeDeps et pkgDeps, on peut également produire des fichiers intermédiaires et les inclure dans d'autres packages.