Daha önce de belirtildiği gibi, paket yöneticisi Bower gibi, genellikle istemci tarafı komut dosyalarına dayanmayan uygulamalarda bu gibi bağımlılıklar için kullanılan , çıkış yolunda ve aktif olarak diğer çözümlere geçmeyi tavsiye ediyor:
..psst! Bower bakımı yapılırken, iplik ve yapılırken , yeni ön uç projeler için web paketi !
Öyleyse, şu anda hala kullanabilseniz de, Bootstrap ayrıca bunun için desteği bırakacağını . Sonuç olarak, yerleşik ASP.NET Core şablonları da bundan uzaklaşmak için yavaşça düzenleniyor.
Ne yazık ki, ileriye dönük net bir yol yok. Bunun nedeni, web uygulamalarının sürekli olarak istemci tarafına doğru ilerlemesi, karmaşık istemci tarafı oluşturma sistemleri ve birçok bağımlılık gerektirmesidir. Öyleyse, böyle bir şey inşa ediyorsanız, bunu nasıl çözeceğinizi zaten biliyor olabilirsiniz ve mevcut inşa sürecinizi sadece Bootstrap ve jQuery'yi de içerecek şekilde genişletebilirsiniz.
Ancak, istemci tarafında o kadar ağır olmayan, uygulamanın hala esas olarak sunucuda çalıştığı ve sonuç olarak sunucunun statik görünümler sunduğu birçok web uygulaması var. Bower daha önce bunu, çok fazla işlem olmadan yalnızca istemci tarafı bağımlılıklarını yayınlamayı kolaylaştırarak doldurdu.
. Maalesef yenisiyle.csproj biçim ve yeni NuGet ile, yüklü paketler projemizin dışında yer almaktadır, bu nedenle bunlara basitçe başvuramayız.
Bu bize bağımlılıklarımızı nasıl ekleyeceğimiz konusunda birkaç seçenek bırakır:
Tek seferlik kurulum
Tek sayfalı uygulamalar olmayan ASP.NET Core şablonlarının şu anda yaptığı şey budur. Bunları yeni bir uygulama oluşturmak için kullandığınızda, wwwrootklasör yalnızca libbağımlılıkları içeren bir klasör içerir:
Şu anda dosyalara yakından bakarsanız, şablonun oluşturulması için oraya Bower ile yerleştirildiklerini görebilirsiniz, ancak bunun yakında değişmesi muhtemeldir. Temel fikir, dosyaların bir kez kopyalanmasıdır .wwwroot klasöre böylece onlara güvenebilirsiniz.
Bunu yapmak için, Bootstrap'in tanıtımını takip edebilir ve derlenen dosyaları doğrudan indirebiliriz . İndirme sitesinde belirtildiği gibi, buna jQuery dahil değildir , bu yüzden onu da ayrıca indirmemiz gerekir; o içermiyor Popper.js biz kullanmayı tercih ederseniz olsa bootstrap.bundledosyayı daha sonra -ki biz yapacağız. JQuery için, indirme sitesinden tek bir "sıkıştırılmış, üretim" dosyası alabiliriz (bağlantıya sağ tıklayın ve menüden "Bağlantıyı farklı kaydet ..." seçeneğini seçin).
Bu, bize basitçe ayıklayıp wwwrootklasöre kopyalayacak birkaç dosya bırakır . Ayrıca lib, bunların harici bağımlılıklar olduğunu daha net hale getirmek için bir klasör oluşturabiliriz:
Tek ihtiyacımız olan bu, bu yüzden şimdi _Layout.cshtmldosyamızı bu bağımlılıkları içerecek şekilde ayarlamamız gerekiyor . Bunun için aşağıdaki bloğu ekliyoruz <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>
Ve en sonunda aşağıdaki blok <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>
Ayrıca küçültülmüş sürümleri dahil edebilir ve <environment>biraz daha basit hale getirmek için buradaki etiket yardımcılarını atlayabilirsiniz . Ama başlamanız için yapmanız gereken tek şey bu.
NPM'den bağımlılıklar
Daha modern yol, bağımlılıklarınızı güncel tutmak istiyorsanız, bağımlılıkları NPM paket deposundan almak olacaktır. Bunun için NPM veya İplik kullanabilirsiniz; benim örneğimde NPM kullanacağım.
Başlamak package.jsoniçin, bağımlılıklarımızı belirtebilmemiz için projemiz için bir dosya oluşturmamız gerekiyor . Bunu yapmak için, bunu "Yeni Öğe Ekle" iletişim kutusundan yapıyoruz:
Buna sahip olduğumuzda, bağımlılıklarımızı içerecek şekilde düzenlememiz gerekir. Bunun gibi bir şey görünmeli:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Kaydederek, Visual Studio bağımlılıkları bizim için yüklemek için zaten NPM'yi çalıştıracaktır. node_modulesKlasöre yüklenecekler . Öyleyse yapılacak şey, dosyaları oradan wwwrootklasörümüze almak. Bunu yapmak için birkaç seçenek var:
bundleconfig.json paketleme ve küçültme için
Belgelerdebundleconfig.json açıklandığı gibi, paket ve küçültme için a tüketmenin çeşitli yollarından birini kullanabiliriz . Çok kolay bir yol, bunun için otomatik olarak bir derleme görevi ayarlayan BuildBundlerMinifier NuGet paketini kullanmaktır .
Bu paketi kurduktan sonra bundleconfig.json, projenin kökünde aşağıdaki içeriklerle bir oluşturmamız gerekiyor :
[
{
"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 }
}
]
Bu temelde hangi dosyaların neyle birleştirileceğini yapılandırır. Ve inşa ettiğimizde, vendor.min.cssve vendor.js.cssdoğru yaratıldığını görebiliriz . Bu yüzden tek yapmamız gereken _Layouts.html, bu dosyaları içerecek şekilde yeniden ayarlamak :
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Gulp gibi bir görev yöneticisi kullanmak
Biraz daha istemci tarafı geliştirmeye geçmek istersek, orada kullanacağımız araçları da kullanmaya başlayabiliriz. Örneğin , gerçekten her şey için çok yaygın olarak kullanılan bir oluşturma aracı olan Webpack . Ancak Gulp gibi daha basit bir görev yöneticisiyle başlayabilir ve gerekli birkaç adımı kendimiz yapabiliriz.
Bunun için gulpfile.jsproje kökümüze aşağıdaki içeriklerle a ekliyoruz :
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'));
Şimdi, ayrıca package.jsonbağımlılıklarımızı ayarlamamız gerekiyor gulpve 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"
}
}
Son olarak, .csprojprojemizi oluşturduğumuzda Gulp görevimizin çalıştığından emin olmak için aşağıdaki görevi eklemek için düzenledik :
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Şimdi, inşa ettiğimizde, defaultGulp görevi çalışır, build-vendorgörevleri çalıştırır ve daha sonra bizim vendor.min.cssve vendor.min.jsdaha önce yaptığımız gibi oluşturur . Yani _Layout.cshtmlaynen yukarıdaki gibi ayarladıktan sonra jQuery ve Bootstrap'ı kullanabiliriz.
Gulp'un ilk kurulumu bundleconfig.jsonyukarıdakinden biraz daha karmaşık olsa da , şimdi Düğüm dünyasına girdik ve oradaki diğer tüm harika araçları kullanmaya başlayabiliriz. Öyleyse bununla başlamaya değer olabilir.
Sonuç
Bu, birdenbire Bower'ı kullanmaktan çok daha karmaşık hale gelse de, bu yeni seçeneklerle çok fazla kontrole sahip oluyoruz. Örneğin, artık wwwrootklasörün içinde gerçekte hangi dosyaların bulunduğuna ve bunların tam olarak nasıl göründüğüne karar verebiliriz . Ayrıca bunu, en azından öğrenme eğrisine biraz yardımcı olması gereken Node ile istemci tarafı geliştirme dünyasına ilk hamleleri yapmak için de kullanabiliriz .
