El manejo de dependencias y la gestión de módulos en SPA es un tema que tiene diferentes actores en el mundo Javascript. Para la gestión de paquetes tenemos Bower, Nuget, NPM y JSPM y para la carga de módulos tenemos Browserify, Requirejs y Webpack, pero yo he decidido usar a nivel personal por NPM y JSPM

 JSPM es un gestor de paquetes igual que NPM , además de manejar dependencias , incluye carga de módulos mediante Systemjs que pueden estar definidos en Commonjs, AMD, además soporte de transpiler como Babel, Traceur o Typescript .

Explicaré como instalar JSPM, como utilizarlo para gestionar las dependencias , módulos y empaquetado de nuestro código.

Instalación y Configuración de JSPM

  1. Instalamos Nodejs
  2. instalamos JSPM mediante de NPM
npm install -g jspm

2- Iniciamos JSPM en el directorio de nuestro proyecto.

jspm init

4- Nos realizará varias preguntas para la configuración, para configurar como organizará los registros de los paquetes, directorios y transpiladores.

  •  Informa de la creación de Package.json
warn Running jspm globally, it is advisable to locally install jspm via npm inst
all jspm --save-dev.

Package.json file does not exist, create it? [yes]:
  • Deseas que los paquetes que se instalen mediante JSPM  y se registren en  package.json usen el prefijo jspm?
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]
  • Cual directorio será la raíz para la aplicación o donde el servidor mostrará los archivos.
Enter server baseURL (public folder path) [./]:
  • Cual es el directorio de los paquetes de jspm
Enter jspm packages folder
  • En que directorio estará el config.js
Enter config file path [./config.js]:
  • La url de la aplicación o de donde el navegador cargara el directorio:
Enter client baseURL (public folder URL) [/]:
  • Si usaremos un transpiler  (Babel, Typescript o Traceur)
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

Al finalizar JSPM descargará las librerías necesarias para el module loader y transpiling.

ok Installed github:jspm/nodelibs-child_process@^0.1.0 (0.1.0)
ok Installed babel-runtime as npm:babel-runtime@^5.8.24 (5.8.38)
ok Installed core-js as npm:core-js@^1.1.4 (1.2.6)
ok Loader files downloaded successfully

Ya podemos mediante jspm instalar las librerías que usaremos en nuestra aplicación, en mi caso usare jquery y mustache.

Instalando paquetes mediante JSPM

JSPM nos permite instalar paquetes desde github o npm,  ahora instalamos Mustache y Jquery.

danyair:i18nexample dany$ jspm install mustache
     Updating registry cache...
     Looking up github:janl/mustache.js
     Downloading github:janl/mustache.js@2.2.1
ok   Installed mustache as github:janl/mustache.js@^2.2.1 (2.2.1)
ok   Install tree has no forks.

ok   Install complete.
danyair:i18nexample dany$

Escribiendo modulos con ES6 y JSPM

Ahora escribiremos una app simple utilizando las librerías descargadas mediante jspm (Mustache y Jquery) y escribiremos un modulo. En el directorio core.js y app.js utilizare la sintaxis de ES6 ya que tengo Babel para así utilizar clases y módulos.

core.js
Este modulo importa Mustache de ‘Mustache’ , creo la clase Core y en el constructor tenemos una propiedad, this.template en la que lee el template de Mustache.

La clase Core tiene un método ShowView que se encarga de pasar el viewmodel al template y renderizarlo con el método render de Mustache además de  exportar la clase Core para que pueda ser utilizada por otras.

import Mustache from 'mustache'
 export class Core {

constructor() {
 this.template = document.getElementById('mustachetemplate').innerHTML;

}

ShowView() {

var vm = {

myname: 'Dany Paredes',
 message: 'Using JSPM and Mustache!'
 }

document.getElementById('app').innerHTML = Mustache.render(this.template, vm);
 }

}

app.js

Este será el punto de entrada de la aplicación, importamos el modulo Core  y  $ de Jquery , creamos una instancia de Core y llamamos el método ShowView para visualizar la vista.

import {
 Core
 } from './core'

import $ from 'jquery'

$(document).ready(function() {

var core = new Core();

core.ShowView();

})

index.html:

Creamos el 2 div una para la view y otro que contendrá el template de Mustache.

 <div id="app">
 </div>

<script id="mustachetemplate" type="x-tmpl-mustache">
 <div class="row">
 <h1>{{myname}}</h1>
 <h2>{{message}}</h2>
 </div>

Incluimos system.js que nos permite cargar los módulos y config.js donde están definidas las dependencias de la app, con estas referencia ahora podemos definir que nuestro punto de entrara de app.

<script>
 System.import('app')
 </script>

Solo toca iniciar nuestra app con un webserver local, JSPM busca las librerías y dependencias de app.

Como eliminar la dependencia de config.js y system.js ?

JSPM nos permite optimizar el código con el uso de bundle y la creación de un sfx o (self execute), así evitamos tener
referencias a config.js y system.js

danyair: jspm bundle-sfx app
 Building the single-file sfx bundle for app...
 ok Built into build.js with source maps, unminified.

Comentamos las referencias a system, config , y comentamos el punto de entrada y agregamos la referencia a build.js

<!--<script src="jspm_packages/system.js"></script>
 <script src="config.js"></script>-->
 <!--<script> System.import('app') </script>-->

<script src="build.js"></script>

Descargar código:
https://github.com/danywalls/modulos-y-manejo-de-dependecias-con-jspm

Happy JSPM!.

Gracias a @oriolpuigbuil por el feedback!