Hola a todos, ASP.NET 5 o también conocido como ASP.NET vNext ofrece nuevas vías para el manejo de paquetes en nuestras aplicaciones Web, anteriormente Nuget era el componente diseñado para gestionar/administrar todos los paquetes que requería nuestro proyecto, y ahora en ASP.NET 5 disponemos de otros dos manejadores de paquetes (NPM y Bower), es decir, ahora tenemos:

  • Nuget: La idea con Nuget es manejar todas las dependencias a paquetes como Entity Framework, MVC,ASP.NET MVC y en general todos aquellos paquetes que sean assemblies, se verá reflejado en el archivo project.json
  • Bower: Bower está pensado para administrar componentes que son utilizados en el front-end de la aplicación, es decir, tanto frameworks y librerías JavaScript como css. se verá reflejado en el archivo bower.json.
  • npm: npm fue creado para administrar paquetes en Node.js, y en nuestro proyecto se verá reflejado en el archivo package.json.

Ahora, veamos como funciona cada uno, lo primero es crear una nueva aplicación web, en este caso utilizando el template vacío (ASP.NET 5 Empty):

package_managers1

Una vez finalizada la creación del proyecto, nos damos cuenta que la estructura del proyecto es totalmente diferente a sus versiones anteriores (en el siguiente post tocaré este punto) y que el archivo *project.json *(para los paquetes Nuget) ya está dentro del proyecto:

package_managers2

Ahora, abrimos dicho archivo y vamos a añadir una dependencia a ASPNET MVC, para ello dentro de la sección e iniciamos a teclear el nombre del paquete, afortunadamente disponemos de intellisense tanto para el nombre del paquete como para la versión:

package_managers3

Igualmente, es posible seguir utilizando el entorno gráfico de Nuget (vamos a añadir Entity Framework):

package_managers4

Ahora, project.json se ve:


 { 
    "webroot": "wwwroot", 
    "version": "1.0.0-*", 
    "exclude": [ "wwwroot" ], 
    "packExclude": [ "node_modules", "bower_components", "**.kproj", "**.user", "**.vspscc" ], 
    "dependencies": { 
        "Microsoft.AspNet.Server.IIS": "1.0.0-beta2", 
        "Microsoft.AspNet.Mvc": "6.0.0-beta2", 
        "EntityFramework": "6.1.2.0" 
    }, 
    "frameworks": { 
        "aspnet50": { }, 
        "aspnetcore50": { } 
    } 
}
 
 
Sigamos con **Bower**, lo primero es añadir un nuevo elemento al proyecto, en este caso un archivo de configuración de Bower: [![package_managers5](http://res.cloudinary.com/hxj9bljch/image/upload/v1426528889/package_managers5_uanr04.png)](http://res.cloudinary.com/hxj9bljch/image/upload/v1426528889/package_managers5_uanr04.png) Como se mencionó al principio del post, [Bower](http://bower.io/) permite administrar los recursos que se necesitan en el front-end como librerías JavaScript y framework css, para el ejemplo añadiremos Bootstrap y AngularJS, al igual que con el paquete anterior disponemos de intellisense: [![package_managers6](http://res.cloudinary.com/hxj9bljch/image/upload/v1426528888/package_managers6_fpnqjq.png)](http://res.cloudinary.com/hxj9bljch/image/upload/v1426528888/package_managers6_fpnqjq.png) Ahora, el archivo **bower.json** se ve como:

{ 
    "name": "PackageManeger", 
    "private": true, 
    "dependencies": { 
        "bootstrap": "3.3.2", 
        "angularjs": "1.3.13" 
    }, 
    "exportsOverride": { } 
}

Ahora, es necesario ir a Dependecies -> Bower y restaurar los paquetes que se han añadido:

package_managers8

Una vez restaurados los paquetes, se visualiza el paquete instalado y sus dependencias en caso que se necesiten, para este caso jQuery que es una dependencia de Bootstrap:

package_managers9

Y finalmente llegamos a npm, al igual que con Bower, se debe añadir un archivo de configuración, en este caso un archivo de configuración npm:

package_managers7

Sobre el archivo package.json añadimos una dependencia a Grunt, el cual permite ejecutar tareas automáticamente sobre archivos JavaScript (en uno de los siguiente post lo voy a tratar más en detalle), de nuevo y como en los manejadores de paquetes anteriores también disponemos de intellisense:

package_managers10

No olviden luego de referenciar el paquete ir a la carpeta Dependencies -> NPM y dar en restaurar paquetes (Restore Packages):

package_managers11

El archivo package.json debe verse:


{ 
    "version": "1.0.0", 
    "name": "PackageManeger", 
    "private": true, 
    "devDependencies": { 
        "grunt": "0.4.5" 
    } 
} 

Bueno, y hasta aquí llegamos, espero haya quedado un poco más claro los nuevos manejadores de paquetes en ASP.NET 5 y que fin tiene cada uno.

Si te ha gustado no te olvides de compartir!

Saludos!