ดังที่คนอื่น ๆ กล่าวไปแล้วตัวจัดการแพ็คเกจBowerซึ่งโดยปกติจะใช้สำหรับการอ้างอิงเช่นนี้ในแอปพลิเคชันที่ไม่ต้องพึ่งพาการเขียนสคริปต์ฝั่งไคลเอ็นต์จำนวนมากกำลังจะออกและแนะนำให้ย้ายไปยังโซลูชันอื่น ๆ :
..psst! ในขณะที่ Bower ได้รับการบำรุงรักษาเราขอแนะนำให้ใช้yarnและwebpackสำหรับโครงการ front-end ใหม่!
ดังนั้นแม้ว่าคุณยังสามารถใช้มันตอนนี้เงินทุนยังได้ประกาศการวางสนับสนุนสำหรับมัน ด้วยเหตุนี้เทมเพลต ASP.NET Core ในตัวจึงได้รับการแก้ไขอย่างช้าๆเพื่อย้ายออกไป
น่าเสียดายที่ไม่มีเส้นทางข้างหน้าที่ชัดเจน ส่วนใหญ่เกิดจากการที่เว็บแอปพลิเคชันกำลังเคลื่อนตัวไปยังฝั่งไคลเอ็นต์อย่างต่อเนื่องโดยต้องใช้ระบบสร้างฝั่งไคลเอ็นต์ที่ซับซ้อนและการอ้างอิงจำนวนมาก ดังนั้นหากคุณกำลังสร้างอะไรแบบนั้นคุณอาจรู้วิธีแก้ปัญหานี้แล้วและคุณสามารถขยายกระบวนการสร้างที่มีอยู่เพื่อรวม Bootstrap และ jQuery ไว้ที่นั่นได้
แต่ยังมีแอปพลิเคชันเว็บจำนวนมากที่ไม่ได้ใช้งานหนักในฝั่งไคลเอ็นต์ซึ่งแอปพลิเคชันยังคงทำงานบนเซิร์ฟเวอร์เป็นหลักและเซิร์ฟเวอร์ให้บริการมุมมองแบบคงที่เป็นผล ก่อนหน้านี้ Bower เติมเต็มสิ่งนี้ด้วยการทำให้ง่ายเพียงแค่เผยแพร่การอ้างอิงฝั่งไคลเอ็นต์โดยไม่ต้องมีกระบวนการมากนัก
ในโลก. NET เรายังมี NuGet และ ASP.NET เวอร์ชันก่อนหน้าเราสามารถใช้ NuGet ได้เช่นกันเพื่อเพิ่มการอ้างอิงให้กับการอ้างอิงฝั่งไคลเอ็นต์เนื่องจาก NuGet จะวางเนื้อหาลงในโครงการของเราอย่างถูกต้อง น่าเสียดายที่ด้วย.csprojรูปแบบใหม่และ NuGet ใหม่แพ็คเกจที่ติดตั้งจะอยู่นอกโครงการของเราดังนั้นเราจึงไม่สามารถอ้างอิงได้
สิ่งนี้ทำให้เรามีตัวเลือกสองสามอย่างในการเพิ่มการอ้างอิงของเรา:
ติดตั้งครั้งเดียว
นี่คือสิ่งที่เทมเพลต ASP.NET Core ซึ่งไม่ใช่แอปพลิเคชันหน้าเดียวกำลังทำอยู่ เมื่อคุณใช้สิ่งเหล่านี้เพื่อสร้างแอปพลิเคชันใหม่wwwrootโฟลเดอร์จะมีโฟลเดอร์libที่มีการอ้างอิง:
หากคุณดูไฟล์อย่างใกล้ชิดในปัจจุบันคุณจะเห็นได้ว่าไฟล์เหล่านี้ถูกวางไว้ที่เดิมโดย Bower เพื่อสร้างเทมเพลต แต่มีแนวโน้มที่จะเปลี่ยนแปลงในไม่ช้า แนวคิดพื้นฐานคือไฟล์จะถูกคัดลอกไปยังโฟลเดอร์หนึ่งครั้งเพื่อwwwrootให้คุณสามารถพึ่งพาได้
ในการทำเช่นนี้เราสามารถทำตามคำแนะนำของ Bootstrap และดาวน์โหลดไฟล์ที่คอมไพล์ได้โดยตรง ตามที่ระบุไว้ในเว็บไซต์ดาวน์โหลดนี้ไม่รวมjQueryดังนั้นเราจำเป็นต้องดาวน์โหลดแยกต่างหากด้วย มันมี Popper.jsแม้ว่าเราจะเลือกใช้bootstrap.bundleไฟล์ในภายหลังซึ่งเราจะทำ สำหรับ jQuery เราสามารถรับไฟล์ "บีบอัดและการผลิต" ไฟล์เดียวจากเว็บไซต์ดาวน์โหลด (คลิกขวาที่ลิงก์และเลือก "บันทึกลิงก์เป็น ... " จากเมนู)
สิ่งนี้ทำให้เรามีไฟล์ไม่กี่ไฟล์ซึ่งจะแตกและคัดลอกลงในwwwrootโฟลเดอร์ นอกจากนี้เรายังสามารถสร้างlibโฟลเดอร์เพื่อให้ชัดเจนขึ้นว่าสิ่งเหล่านี้เป็นการอ้างอิงภายนอก:
นั่นคือทั้งหมดที่เราต้องการดังนั้นตอนนี้เราต้องปรับ_Layout.cshtmlไฟล์ของเราเพื่อรวมการอ้างอิงเหล่านั้น ด้วยเหตุนี้เราจึงเพิ่มบล็อกต่อไปนี้ใน<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>
และบล็อกต่อไปนี้ที่ท้ายสุดของ<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>
คุณยังสามารถรวมเวอร์ชันที่ย่อขนาดแล้วข้ามตัว<environment>ช่วยแท็กได้ที่นี่เพื่อให้ง่ายขึ้น แต่นั่นคือทั้งหมดที่คุณต้องทำเพื่อให้คุณเริ่มต้นได้
การพึ่งพาจาก NPM
วิธีที่ทันสมัยกว่านี้หากคุณต้องการให้การอ้างอิงของคุณอัปเดตคือการได้รับการอ้างอิงจากที่เก็บแพ็กเกจ NPM คุณสามารถใช้ NPM หรือ Yarn สำหรับสิ่งนี้ ในตัวอย่างของฉันฉันจะใช้ NPM
ในการเริ่มต้นเราต้องสร้างpackage.jsonไฟล์สำหรับโครงการของเราเพื่อให้เราสามารถระบุการอ้างอิงของเราได้ ในการดำเนินการนี้เราทำได้จากกล่องโต้ตอบ "เพิ่มรายการใหม่":
เมื่อเรามีแล้วเราจำเป็นต้องแก้ไขเพื่อรวมการอ้างอิงของเรา ควรมีลักษณะดังนี้:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
โดยการบันทึก Visual Studio จะรัน NPM เพื่อติดตั้งการอ้างอิงให้เราแล้ว จะถูกติดตั้งลงในnode_modulesโฟลเดอร์ ดังนั้นสิ่งที่ต้องทำก็คือรับไฟล์จากที่นั่นไปยังwwwrootโฟลเดอร์ของเรา มีตัวเลือกให้ทำดังนี้
bundleconfig.json สำหรับการรวมกลุ่มและการลดขนาด
เราสามารถใช้หนึ่งในวิธีการต่างๆในการกินbundleconfig.jsonสำหรับ bundling และ minification ตามที่อธิบายไว้ในเอกสาร วิธีที่ง่ายมากเพียงแค่ใช้แพ็คเกจ BuildBundlerMinifier NuGetซึ่งจะตั้งค่างานสร้างสำหรับสิ่งนี้โดยอัตโนมัติ
หลังจากติดตั้งแพ็คเกจนั้นเราจำเป็นต้องสร้างbundleconfig.jsonที่รูทของโปรเจ็กต์โดยมีเนื้อหาต่อไปนี้:
[
{
"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 }
}
]
โดยพื้นฐานแล้วจะกำหนดค่าไฟล์ที่จะรวมเข้ากับอะไร และเมื่อเราสร้างเราจะเห็นว่าvendor.min.cssและvendor.js.cssถูกสร้างขึ้นอย่างถูกต้อง ดังนั้นสิ่งที่เราต้องทำคือปรับ_Layouts.htmlอีกครั้งเพื่อรวมไฟล์เหล่านั้น:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
ใช้ตัวจัดการงานเช่น Gulp
หากเราต้องการก้าวไปสู่การพัฒนาฝั่งไคลเอ็นต์อีกเล็กน้อยเราสามารถเริ่มใช้เครื่องมือที่เราจะใช้ที่นั่นได้ ตัวอย่างเช่นWebpackซึ่งเป็นเครื่องมือสร้างที่ใช้กันทั่วไปสำหรับทุกอย่างจริงๆ แต่เรายังสามารถเริ่มต้นด้วยตัวจัดการงานที่ง่ายกว่าเช่นGulpและทำตามขั้นตอนที่จำเป็นไม่กี่ขั้นตอนด้วยตัวเอง
ด้วยเหตุนี้เราจึงเพิ่ม a gulpfile.jsเข้าไปในรูทโปรเจ็กต์ของเราโดยมีเนื้อหาดังต่อไปนี้:
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'));
ตอนนี้เราต้องปรับเปลี่ยนpackage.jsonให้มีการพึ่งพาgulpและ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"
}
}
สุดท้ายเราแก้ไข.csprojเพื่อเพิ่มงานต่อไปนี้ซึ่งทำให้แน่ใจว่างาน Gulp ของเราทำงานเมื่อเราสร้างโครงการ:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
ตอนนี้เมื่อเราสร้างdefaultงาน Gulp จะทำงานซึ่งรันbuild-vendorภารกิจซึ่งจะสร้างของเราvendor.min.cssและvendor.min.jsเหมือนกับที่เราเคยทำมาก่อน ดังนั้นหลังจากปรับเปลี่ยน_Layout.cshtmlเหมือนด้านบนแล้วเราสามารถใช้ jQuery และ Bootstrap ได้
แม้ว่าการตั้งค่าเริ่มต้นของ Gulp จะซับซ้อนกว่าที่กล่าวมาbundleconfig.jsonข้างต้นเล็กน้อยแต่ตอนนี้เราได้เข้าสู่ Node-world แล้วและสามารถเริ่มใช้ประโยชน์จากเครื่องมือเจ๋ง ๆ ทั้งหมดที่นั่นได้ ดังนั้นจึงควรเริ่มต้นด้วยสิ่งนี้
สรุป
แม้ว่าสิ่งนี้จะซับซ้อนกว่าการใช้ Bower แต่เราก็สามารถควบคุมตัวเลือกใหม่ ๆ เหล่านี้ได้มากมาย ตัวอย่างเช่นตอนนี้เราสามารถตัดสินใจได้แล้วว่าไฟล์ใดบ้างที่รวมอยู่ในwwwrootโฟลเดอร์และลักษณะของไฟล์เหล่านั้น และเรายังสามารถใช้เพื่อให้ย้ายครั้งแรกในโลกพัฒนาฝั่งไคลเอ็นต์กับโหนดซึ่งอย่างน้อยจะช่วยให้นิดกับเส้นโค้งการเรียนรู้
