Como o Ignite UI para JavaScript funciona com gerenciadores de pacotes e carregadores de módulos

Ignite UI para JavaScript funciona com gerenciadores de pacotes populares para gerenciar as dependências do projeto. Os gerenciadores de pacotes mais populares são:

• NPM
• Yarn
• JSPM

Passo 1 Trabalhando com o MNP

Nas lições anteriores, você usou o NPM para trabalhar com componentes Angular Ignite UI for JavaScript. Para ver como o NPM funciona, baixe o projeto inicial (você também encontrará a versão final do projeto aqui), abra o terminal e execute o comando listado abaixo:

npm install

O comando npm install lê o arquivo package.json para instalar as dependências. Para trabalhar com o NPM, você deve ter o NodeJS instalado; se você ainda não o tiver instalado, poderá instalá-lo no site do NodeJS. Depois de executar o comando NPM install, você encontrará node_modules de pasta adicionados ao seu projeto. Esta pasta contém todas as bibliotecas instaladas usando este comando.

Se você estiver trabalhando em um projeto existente, poderá instalar o pacote individual no projeto. Para instalar o pacote de componentes Angular Ignite UI para JavaScript individualmente, execute o seguinte comando:

npm install igniteui-angular2

Para executar o aplicativo, execute o comando abaixo:

npm start

Passo 2 Trabalhando com fios

O NPM é um dos gerenciadores de pacotes mais populares, mas tem algumas deficiências:

• As dependências aninhadas causam um longo caminho de arquivo no Windows.
• O NPM faz apenas a instalação sequencial, portanto, um pacote deve ser completamente instalado antes que você possa começar a instalar o próximo.
• Ele só pode ser instalado a partir do pacote NPMSJS e não tem instalação offline.

O fio resolve esses problemas. O Yarn é um gerenciador de pacotes rápido, confiável e seguro que recebe pacotes do npmjs ou do registro Bower.

Você pode aprender mais sobre o Yarn em sua página do github.

Assim como o NPM, o Yarn também lê package.json arquivos do seu projeto para instalar dependências.

Para trabalhar com o Yarn, baixe o projeto inicial e abra-o no terminal.

Caso você não tenha o Yarn instalado em sua máquina, você deve instalá-lo com o comando abaixo:

npm install –g yarn

Nota: Se você estiver usando o Mac OS da Apple, poderá receber erros de permissão ao tentar instalar pacotes globais com o NPM. Se isso acontecer, tente:

sudo npm install –g yarn

Depois de instalar o Yarn, você pode usá-lo para instalar dependências em seu projeto. Para instalar dependências, execute o comando abaixo:

yarn install

Se você estiver trabalhando em um projeto existente, também poderá instalar um pacote individual no projeto. Para instalar o pacote Ignite UI para JavaScript Angular components, execute o comando abaixo:

yarn add igniteui-angular2

Após a instalação bem-sucedida, você encontrará uma pasta node_modules adicionada ao projeto. Para executar o aplicativo, execute o comando abaixo:

yarn start

Se tudo estiver correto, o comando acima deve iniciar o aplicativo e você terá um aplicativo em execução, conforme mostrado abaixo:

Passo 3 Trabalhando com carregadores de módulos dinâmicos

O SystemJS é um carregador de módulo que pode importar um módulo em tempo de execução e é construído sobre o carregador de módulo ES6. Ele pode transpilar código ES6 ou TypeScript. O SystemJS pode funcionar com muitos tipos de formatos de módulo, como AMD e CommonJS. Ele também pode trabalhar e oferecer suporte a Ignite UI para módulos JavaScript.

No projeto baixado, abra o arquivo System.config.js para localizar o mapeamento para componentes Angular Ignite UI para JavaScript, conforme mostrado abaixo:

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

Além disso, você pode encontrar o pacote de componentes Angular Ignite UI para JavaScript, conforme mostrado abaixo:

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

Devido às informações de empacotamento e mapeamento no system.config.js, quando o aplicativo Angular precisar de Ignite UI para módulos JavaScript, ele será carregado dinamicamente pelo SystemJS no aplicativo.