Như những người khác đã đề cập, trình quản lý gói Bower , thường được sử dụng cho các phần phụ thuộc như thế này trong ứng dụng không dựa vào kịch bản phía máy khách nặng, đang trên đường ra mắt và tích cực đề xuất chuyển sang các giải pháp khác:
..sst! Trong khi Bower được bảo trì, chúng tôi khuyên bạn nên sử dụng sợi và webpack cho các dự án front-end mới!
Vì vậy, mặc dù bạn vẫn có thể sử dụng nó ngay bây giờ, Bootstrap cũng đã thông báo ngừng hỗ trợ cho nó . Do đó, các mẫu ASP.NET Core tích hợp sẵn đang dần được chỉnh sửa để loại bỏ nó.
Thật không may, không có con đường rõ ràng về phía trước. Điều này chủ yếu là do các ứng dụng web liên tục tiến sâu hơn vào phía máy khách, đòi hỏi hệ thống xây dựng phía máy khách phức tạp và nhiều phụ thuộc. Vì vậy, nếu bạn đang xây dựng một cái gì đó như vậy, bạn có thể đã biết cách giải quyết vấn đề này sau đó và bạn có thể mở rộng quy trình xây dựng hiện tại của mình để chỉ cần bao gồm Bootstrap và jQuery ở đó.
Nhưng vẫn còn nhiều ứng dụng web ngoài kia không quá nặng về phía máy khách, nơi ứng dụng vẫn chạy chủ yếu trên máy chủ và do đó máy chủ phục vụ các chế độ xem tĩnh. Bower trước đây đã giải quyết vấn đề này bằng cách giúp bạn dễ dàng xuất bản các phụ thuộc phía máy khách mà không cần nhiều quá trình.
Trong thế giới .NET, chúng tôi cũng có NuGet và với các phiên bản ASP.NET trước đó, chúng tôi cũng có thể sử dụng NuGet để thêm các phụ thuộc vào một số phụ thuộc phía máy khách vì NuGet sẽ chỉ đặt nội dung vào dự án của chúng tôi một cách chính xác. Thật không may, với .csprojđịnh dạng mới và NuGet mới, các gói đã cài đặt nằm bên ngoài dự án của chúng tôi, vì vậy chúng tôi không thể đơn giản tham chiếu các gói đó.
Điều này để lại cho chúng tôi một số tùy chọn về cách thêm các phụ thuộc của chúng tôi:
Cài đặt một lần
Đây là những gì các mẫu ASP.NET Core, không phải là các ứng dụng một trang, hiện đang làm. Khi bạn sử dụng chúng để tạo một ứng dụng mới, wwwrootthư mục chỉ chứa một thư mục libchứa các phần phụ thuộc:
Nếu bạn xem xét kỹ các tệp hiện tại, bạn có thể thấy rằng ban đầu chúng được đặt ở đó cùng với Bower để tạo mẫu, nhưng điều đó có thể sẽ sớm thay đổi. Ý tưởng cơ bản là các tệp được sao chép một lần vào wwwrootthư mục để bạn có thể phụ thuộc vào chúng.
Để làm điều này, chúng ta có thể chỉ cần làm theo phần giới thiệu của Bootstrap và tải trực tiếp các tệp đã biên dịch . Như đã đề cập trên trang web tải xuống, điều này không bao gồm jQuery , vì vậy chúng tôi cũng cần tải xuống riêng; nó có chứa Popper.js mặc dù nếu chúng tôi chọn sử dụng bootstrap.bundletệp sau này — chúng tôi sẽ thực hiện. Đối với jQuery, chúng ta có thể chỉ cần lấy một tệp “nén, sản xuất” từ trang web tải xuống (nhấp chuột phải vào liên kết và chọn "Lưu liên kết dưới dạng ..." từ menu).
Điều này để lại cho chúng tôi một số tệp sẽ chỉ đơn giản là giải nén và sao chép vào wwwrootthư mục. Chúng tôi cũng có thể tạo một libthư mục để làm rõ ràng rằng đây là những phần phụ thuộc bên ngoài:
Đó là tất cả những gì chúng ta cần, vì vậy bây giờ chúng ta chỉ cần điều chỉnh _Layout.cshtmltệp của mình để bao gồm các phụ thuộc đó. Để làm được điều đó, chúng tôi thêm khối sau vào <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>
Và khối sau ở cuối <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>
Bạn cũng có thể chỉ bao gồm các phiên bản rút gọn và bỏ qua trình <environment>trợ giúp thẻ ở đây để làm cho nó đơn giản hơn một chút. Nhưng đó là tất cả những gì bạn cần làm để bắt đầu.
Sự phụ thuộc từ NPM
Cách hiện đại hơn, cũng nếu bạn muốn cập nhật các phần phụ thuộc của mình, là lấy các phần phụ thuộc từ kho gói NPM. Bạn có thể sử dụng NPM hoặc Yarn cho việc này; trong ví dụ của tôi, tôi sẽ sử dụng NPM.
Để bắt đầu, chúng ta cần tạo một package.jsontệp cho dự án của mình, để chúng ta có thể chỉ định các phụ thuộc của mình. Để làm điều này, chúng tôi chỉ cần thực hiện điều đó từ hộp thoại “Thêm mục mới”:
Khi chúng ta có điều đó, chúng ta cần chỉnh sửa nó để bao gồm các phụ thuộc của chúng ta. Nó sẽ giống như thế này:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Bằng cách lưu, Visual Studio sẽ chạy NPM để cài đặt các phụ thuộc cho chúng tôi. Chúng sẽ được cài đặt vào node_modulesthư mục. Vì vậy, những gì còn lại cần làm là lấy các tệp từ đó vào wwwrootthư mục của chúng tôi . Có một số tùy chọn để làm điều đó:
bundleconfig.json để đóng gói và rút gọn
Chúng tôi có thể sử dụng một trong những cách khác nhau để sử dụng một bundleconfig.jsongói và rút gọn, như được giải thích trong tài liệu . Một cách rất dễ dàng là chỉ cần sử dụng gói BuildBundlerMinifier NuGet để tự động thiết lập nhiệm vụ xây dựng cho việc này.
Sau khi cài đặt gói đó, chúng ta cần tạo một bundleconfig.jsonở gốc của dự án với nội dung sau:
[
{
"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 }
}
]
Điều này về cơ bản định cấu hình tệp nào sẽ kết hợp thành tệp nào. Và khi chúng tôi xây dựng, chúng tôi có thể thấy rằng vendor.min.cssvà vendor.js.cssđược tạo chính xác. Vì vậy, tất cả những gì chúng ta cần làm là điều chỉnh _Layouts.htmllại để bao gồm các tệp đó:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Sử dụng trình quản lý tác vụ như Gulp
Nếu chúng ta muốn chuyển sang phát triển phía máy khách nhiều hơn một chút, chúng ta cũng có thể bắt đầu sử dụng các công cụ mà chúng ta sẽ sử dụng ở đó. Ví dụ như Webpack , một công cụ xây dựng được sử dụng rất phổ biến cho mọi thứ. Nhưng chúng ta cũng có thể bắt đầu với một trình quản lý tác vụ đơn giản hơn như Gulp và tự mình thực hiện một số bước cần thiết.
Đối với điều đó, chúng tôi thêm một gulpfile.jsvào thư mục gốc của chúng tôi, với các nội dung sau:
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'));
Bây giờ, chúng ta cũng cần điều chỉnh package.jsonđể có các phụ thuộc vào gulpvà 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"
}
}
Cuối cùng, chúng tôi chỉnh sửa của chúng tôi .csprojđể thêm tác vụ sau để đảm bảo rằng tác vụ Gulp của chúng tôi chạy khi chúng tôi xây dựng dự án:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Bây giờ, khi chúng tôi xây dựng, defaulttác vụ Gulp sẽ chạy, tác vụ này chạy các build-vendortác vụ, sau đó xây dựng tác vụ của chúng tôi vendor.min.cssvà vendor.min.jsgiống như chúng tôi đã làm trước đây. Vì vậy, sau khi điều chỉnh _Layout.cshtmlgiống như trên, chúng ta có thể sử dụng jQuery và Bootstrap.
Mặc dù thiết lập ban đầu của Gulp phức tạp hơn một chút so với thiết lập bundleconfig.jsonở trên, nhưng bây giờ chúng ta đã bước vào thế giới Node và có thể bắt đầu sử dụng tất cả các công cụ thú vị khác ở đó. Vì vậy, nó có thể đáng để bắt đầu với điều này.
Phần kết luận
Mặc dù điều này đột nhiên trở nên phức tạp hơn rất nhiều so với chỉ sử dụng Bower, nhưng chúng tôi cũng có được rất nhiều quyền kiểm soát với những tùy chọn mới đó. Ví dụ, bây giờ chúng ta có thể quyết định những tệp nào thực sự được bao gồm trong wwwrootthư mục và chúng trông chính xác như thế nào. Và chúng tôi cũng có thể sử dụng điều này để thực hiện những bước đầu tiên vào thế giới phát triển phía máy khách với Node, điều này ít nhất sẽ giúp ích một chút cho đường cong học tập.
