Como outros já mencionados, o gerenciador de pacotes Bower , que geralmente era usado para dependências como essa em aplicativos que não dependem de scripts pesados do lado do cliente, está saindo e recomendando ativamente a migração para outras soluções:
..psst! Enquanto o Bower é mantido, recomendamos yarn e webpack para novos projetos de front-end!
Portanto, embora você ainda possa usá-lo agora, o Bootstrap também anunciou o fim do suporte para ele . Como resultado, os modelos internos do ASP.NET Core estão sendo lentamente editados para se afastar deles também.
Infelizmente, não há um caminho claro a seguir. Isso se deve principalmente ao fato de que os aplicativos da web estão continuamente avançando para o lado do cliente, exigindo sistemas de construção complexos do lado do cliente e muitas dependências. Portanto, se você estiver construindo algo assim, talvez já saiba como resolver isso e pode expandir seu processo de construção existente para simplesmente incluir também Bootstrap e jQuery lá.
Mas ainda existem muitos aplicativos da web que não são tão pesados no lado do cliente, onde o aplicativo ainda é executado principalmente no servidor e o servidor fornece visualizações estáticas como resultado. O Bower preencheu isso tornando mais fácil publicar apenas dependências do lado do cliente sem muito de um processo.
No mundo .NET, também temos o NuGet e com versões anteriores do ASP.NET, poderíamos usar o NuGet também para adicionar dependências a algumas dependências do lado do cliente, pois o NuGet apenas colocaria o conteúdo em nosso projeto corretamente. Infelizmente, com o novo .csprojformato e o novo NuGet, os pacotes instalados estão localizados fora de nosso projeto, portanto, não podemos simplesmente fazer referência a eles.
Isso nos deixa com algumas opções de como adicionar nossas dependências:
Instalação única
Isso é o que os modelos ASP.NET Core, que não são aplicativos de página única, estão fazendo atualmente. Quando você os usa para criar um novo aplicativo, a wwwrootpasta simplesmente contém uma pasta libque contém as dependências:
Se você olhar atentamente para os arquivos atualmente, pode ver que eles foram originalmente colocados lá com o Bower para criar o modelo, mas isso provavelmente mudará em breve. A ideia básica é que os arquivos sejam copiados uma vez para a wwwrootpasta para que você possa depender deles.
Para fazer isso, podemos simplesmente seguir a introdução do Bootstrap e baixar os arquivos compilados diretamente. Conforme mencionado no site de download, isso não inclui jQuery , portanto, precisamos fazer o download separadamente também; ele contém Popper.js, embora se escolhermos usar o bootstrap.bundlearquivo mais tarde - o que faremos. Para jQuery, podemos simplesmente obter um único arquivo “compactado, de produção” do site de download (clique com o botão direito no link e selecione "Salvar link como ..." no menu).
Isso nos deixa com alguns arquivos que serão simplesmente extraídos e copiados para a wwwrootpasta. Também podemos criar uma libpasta para deixar mais claro que são dependências externas:
Isso é tudo de que precisamos, então agora só precisamos ajustar nosso _Layout.cshtmlarquivo para incluir essas dependências. Para isso, adicionamos o seguinte bloco ao <head>:
<environment include="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>
E o seguinte bloco no final do <body>:
<environment include="Development">
<script src="~/lib/js/jquery-3.3.1.js"></script>
<script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/js/jquery-3.3.1.min.js"></script>
<script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>
Você também pode simplesmente incluir as versões reduzidas e pular os <environment>auxiliares de tag aqui para torná-lo um pouco mais simples. Mas isso é tudo que você precisa fazer para continuar começando.
Dependências do NPM
A maneira mais moderna, também se você quiser manter suas dependências atualizadas, seria obter as dependências do repositório de pacotes NPM. Você pode usar o NPM ou o Yarn para isso; no meu exemplo, usarei o NPM.
Para começar, precisamos criar um package.jsonarquivo para nosso projeto, para que possamos especificar nossas dependências. Para fazer isso, simplesmente fazemos isso na caixa de diálogo "Adicionar novo item":
Assim que tivermos isso, precisamos editá-lo para incluir nossas dependências. Deve ser algo assim:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Ao salvar, o Visual Studio já executará o NPM para instalar as dependências para nós. Eles serão instalados na node_modulespasta. Então, o que resta fazer é colocar os arquivos de lá em nossa wwwrootpasta. Existem algumas opções para fazer isso:
bundleconfig.json para agrupamento e minificação
Podemos usar uma das várias maneiras de consumir um bundleconfig.jsonpara empacotamento e minificação, conforme explicado na documentação . Uma maneira muito fácil é simplesmente usar o pacote BuildBundlerMinifier NuGet, que configura automaticamente uma tarefa de construção para isso.
Depois de instalar esse pacote, precisamos criar um bundleconfig.jsonna raiz do projeto com o seguinte conteúdo:
[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"minify": { "enabled": false }
}
]
Isso basicamente configura quais arquivos combinar em quais arquivos. E quando construímos, podemos ver que os vendor.min.csse vendor.js.csssão criados corretamente. Portanto, tudo o que precisamos fazer é ajustar o nosso _Layouts.htmlnovamente para incluir esses arquivos:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Usando um gerenciador de tarefas como o Gulp
Se quisermos avançar um pouco mais para o desenvolvimento do lado do cliente, também podemos começar a usar as ferramentas que usaríamos lá. Por exemplo, Webpack que é uma ferramenta de construção muito usada para realmente tudo. Mas também podemos começar com um gerenciador de tarefas mais simples como o Gulp e fazer as poucas etapas necessárias nós mesmos.
Para isso, adicionamos um gulpfile.jsna raiz do nosso projeto, com o seguinte conteúdo:
const gulp = require('gulp');
const concat = require('gulp-concat');
const vendorStyles = [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
];
gulp.task('build-vendor-css', () => {
return gulp.src(vendorStyles)
.pipe(concat('vendor.min.css'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));
gulp.task('default', gulp.series('build-vendor'));
Agora, também precisamos ajustar nosso package.jsonpara ter dependências em gulpe gulp-concat:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Finalmente, editamos nosso .csprojpara adicionar a seguinte tarefa, que garante que nossa tarefa Gulp seja executada quando construímos o projeto:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Agora, quando construímos, a defaulttarefa Gulp é executada, que executa as build-vendortarefas, que então constrói o nosso vendor.min.csse vendor.min.jsexatamente como fizemos antes. Então, depois de ajustar nosso _Layout.cshtmlcomo acima, podemos fazer uso de jQuery e Bootstrap.
Embora a configuração inicial do Gulp seja um pouco mais complicada do que a bundleconfig.jsonacima, agora entramos no mundo do Node e podemos começar a fazer uso de todas as outras ferramentas legais lá. Portanto, pode valer a pena começar com isso.
Conclusão
Embora de repente isso tenha ficado muito mais complicado do que apenas usando o Bower, também ganhamos muito controle com essas novas opções. Por exemplo, agora podemos decidir quais arquivos estão realmente incluídos na wwwrootpasta e como eles se parecem exatamente. E também podemos usar isso para dar os primeiros passos no mundo de desenvolvimento do lado do cliente com o Node, o que pelo menos deve ajudar um pouco na curva de aprendizado.
