Cómo funciona Ignite UI para JavaScript con administradores de paquetes y cargadores de módulos

Ignite UI para JavaScript funciona con administradores de paquetes populares para administrar las dependencias del proyecto. Los administradores de paquetes más populares son:

• NPM
• Yarn
• JSPM

Paso 1 Trabajar con NPM

En lecciones anteriores, utilizó NPM para trabajar con Ignite UI para componentes JavaScript Angular. Para ver cómo funciona NPM, descargue el proyecto inicial (también encontrará la versión final del proyecto aquí), abra la terminal y ejecute el comando que se detalla a continuación:

npm install

El comando de instalación de NPM lee el archivo package.json para instalar las dependencias. Para trabajar con NPM, debes tener NodeJS instalado; Si aún no lo tienes instalado, puedes instalarlo desde el sitio web de NodeJS. Después de ejecutar el comando de instalación de NPM, encontrará la carpeta node_modules agregada en su proyecto. Esta carpeta contiene todas las bibliotecas instaladas con este comando.

Si está trabajando en un proyecto existente, puede instalar el paquete individual en el proyecto. Para instalar el paquete de componentes Ignite UI para JavaScript Angular individualmente, ejecute el siguiente comando:

npm install igniteui-angular2

Para ejecutar la aplicación, ejecute el siguiente comando:

npm start

Paso 2 Trabajando con hilo

NPM es uno de los administradores de paquetes más populares, pero tiene algunas deficiencias:

• Las dependencias anidadas provocan una ruta de archivo larga en Windows.
• NPM solo realiza una instalación secuencial, por lo que un paquete debe estar completamente instalado antes de poder comenzar a instalar el siguiente.
• Sólo se puede instalar desde el paquete NPMSJS y no tiene instalación sin conexión.

El hilo resuelve estos problemas. Yarn es un administrador de paquetes rápido, confiable y seguro que toma paquetes de npmjs o del registro bower.

Puedes obtener más información sobre Yarn en su página de github.

Al igual que NPM, Yarn también lee los archivos package.json de su proyecto para instalar dependencias.

Para trabajar con Yarn, descargue el proyecto de inicio y ábralo en la terminal.

Si no tiene Yarn instalado en su máquina, debe instalarlo con el siguiente comando:

npm install –g yarn

Nota: Si está utilizando Mac OS de Apple, es posible que reciba errores de permiso cuando intente instalar paquetes globales con NPM. Si esto sucede, intente:

sudo npm install –g yarn

Después de instalar Yarn, puedes usarlo para instalar dependencias en tu proyecto. Para instalar dependencias, ejecute el siguiente comando:

yarn install

Si está trabajando en un proyecto existente, también puede instalar un paquete individual en el proyecto. Para instalar el paquete de componentes Ignite UI para JavaScript Angular, ejecute el siguiente comando:

yarn add igniteui-angular2

Después de una instalación exitosa, encontrará una carpeta node_modules agregada en el proyecto. Para ejecutar la aplicación, ejecute el siguiente comando:

yarn start

Si todo es correcto, el comando anterior debería iniciar la aplicación y tendrá una aplicación en ejecución como se muestra a continuación:

Paso 3 Trabajar con cargadores de módulos dinámicos

SystemJS es un cargador de módulos que puede importar un módulo en tiempo de ejecución y está construido sobre el cargador de módulos ES6. Puede transpilar código ES6 o TypeScript. SystemJS puede funcionar con muchos tipos de formatos de módulos, como AMD y CommonJS. También puede funcionar y ser compatible con Ignite UI para módulos JavaScript.

En el proyecto descargado, abra el archivo System.config.js para buscar la asignación de Ignite UI para componentes JavaScript Angular como se muestra a continuación:

'igniteui-angular2': 'npm:igniteui-angular2'

Además, puede encontrar el paquete de componentes Ignite UI para JavaScript Angular para cargar como se muestra a continuación:

'igniteui-angular2': {
  main: 'index.js',
  defaultExtension: 'js'
}

Debido a la información de empaquetado y mapeo en system.config.js, cuando la aplicación Angular necesita Ignite UI para módulos JavaScript, SystemJS la cargará dinámicamente en la aplicación.