EmberJS - Gerenciando Dependências

Ember usa NPM e Bower para gerenciar dependências que são definidas em package.json para NPM e bower.json para Bower. Por exemplo, você pode exigir a instalação do SASS para suas folhas de estilo que não são instaladas pelo Ember durante o desenvolvimento do aplicativo Ember. Para fazer isso, use os Complementos Ember para compartilhar as bibliotecas reutilizáveis. Se você deseja instalar qualquer estrutura CSS ou dependências do selecionador de data JavaScript, use o gerenciador de pacotes Bower.

Addons

O Ember CLI pode ser usado para instalar os complementos Ember usando o seguinte comando -

ember install ember-cli-sass

O comando ember install salvará todas as dependências no respectivo arquivo de configuração.

Bower

É um gerenciador de pacotes para a web que gerencia os componentes de HTML, CSS, JavaScript ou arquivos de imagem. Basicamente, ele mantém e monitora todos os pacotes e examina novas atualizações. Ele usa o arquivo de configuração bower.json para rastrear os aplicativos colocados na raiz do projeto Ember CLI.

Você pode instalar as dependências do projeto usando o seguinte comando -

bower install <dependencies> --save

Ativos

Você pode colocar o JavaScript de terceiros no fornecedor / pasta do seu projeto que não está disponível como um pacote Addon ou Bower e colocar os próprios ativos, como robots.txt, favicon, etc. na pasta pública / do seu projeto. As dependências que não são instaladas pelo Ember durante o desenvolvimento do aplicativo Ember, devem ser incluídas usando o arquivo de manifesto ember-cli-build.js .

Módulos AMD JavaScript

Você pode fornecer o caminho do ativo como o primeiro argumento e a lista de módulos e exportações como o segundo argumento. Você pode incluir esses ativos no arquivo de manifesto ember-cli-build.js como -

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

Ativos específicos do ambiente

Os diferentes ativos podem ser usados ​​em diferentes ambientes, definindo o objeto como primeiro parâmetro que é um nome de ambiente e o valor de um objeto deve ser usado como ativo nesse ambiente. No arquivo de manifesto ember-cli-build.js , você pode incluir como -

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

Outros ativos

Assim que todos os recursos forem colocados na pasta public / , eles serão copiados para o diretório dist /. Por exemplo, se você copiar um favicon colocado na pasta public / images / favicon.ico , ele será copiado para o diretório dist / images / favicon.ico . Os ativos de terceiros podem ser adicionados manualmente no fornecedor / pasta ou usando o gerenciador de pacotes Bower por meio da opção import () . Os ativos que não são adicionados usando a opção import () , não estarão presentes na compilação final.

Por exemplo, considere a seguinte linha de código que importa os ativos para a pasta dist / .

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

A linha de código acima cria um arquivo de fonte em dist / font-awesome / fonts / fontawesomewebfont.ttf . Você também pode colocar o arquivo acima em um caminho diferente, conforme mostrado abaixo -

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

Ele copiará o arquivo de fonte em dist / assets / fontawesome-webfont.ttf .