Tôi cho bạn hai câu trả lời. npm kết hợp với các công cụ khác rất mạnh mẽ nhưng yêu cầu một số công việc để thiết lập. Nếu bạn chỉ muốn tải xuống một số thư viện, bạn có thể muốn sử dụng Trình quản lý thư viện thay thế (được phát hành trong Visual Studio 15.8).
NPM (Nâng cao)
Đầu tiên hãy thêm package.json vào thư mục gốc của dự án của bạn. Thêm nội dung sau:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"gulp": "3.9.1",
"del": "3.0.0"
},
"dependencies": {
"jquery": "3.3.1",
"jquery-validation": "1.17.0",
"jquery-validation-unobtrusive": "3.2.10",
"bootstrap": "3.3.7"
}
}
Điều này sẽ làm cho NPM tải xuống Bootstrap, JQuery và các thư viện khác được sử dụng trong một dự án lõi asp.net mới vào một thư mục có tên node_modules. Bước tiếp theo là sao chép các tập tin vào một nơi thích hợp. Để làm điều này, chúng tôi sẽ sử dụng gulp, cũng đã được tải xuống bởi NPM. Sau đó, thêm một tệp mới trong thư mục gốc của bạn có tên là gulpfile.js . Thêm nội dung sau:
/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var gulp = require('gulp');
var del = require('del');
var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';
gulp.task('clean', function () {
return del([targetPath + '/**/*']);
});
gulp.task('default', function () {
gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));
gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));
gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));
gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});
Tệp này chứa mã JavaScript được thực thi khi dự án được xây dựng và làm sạch. Nó sẽ sao chép tất cả các tệp cần thiết sang lib2 ( không phải lib - bạn có thể dễ dàng thay đổi điều này ). Tôi đã sử dụng cấu trúc tương tự như trong một dự án mới, nhưng thật dễ dàng để thay đổi tệp sang một vị trí khác. Nếu bạn di chuyển tệp, hãy đảm bảo rằng bạn cũng cập nhật _Layout.cshtml . Lưu ý rằng tất cả các tệp trong thư mục lib2 sẽ bị xóa khi dự án được làm sạch.
Nếu bạn nhấp chuột phải vào gulpfile.js , bạn có thể chọn Task Runner Explorer . Từ đây, bạn có thể chạy gulp theo cách thủ công để sao chép hoặc xóa tệp.
Gulp cũng có thể hữu ích cho các tác vụ khác như rút gọn tệp JavaScript và CSS:
https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1
Trình quản lý Thư viện (Đơn giản)
Nhấp chuột phải vào dự án của bạn và chọn Quản lý thư viện phía máy khách . Tệp libman.json hiện đã được mở. Trong tệp này, bạn chỉ định thư viện và tệp nào sẽ sử dụng và nơi chúng nên được lưu trữ cục bộ. Thực sự đơn giản! Tệp sau đây sao chép các thư viện mặc định được sử dụng khi tạo một dự án ASP.NET Core 2.1 mới:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.3.1",
"files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
"destination": "wwwroot/lib/jquery/dist/"
},
{
"library": "jquery-validate@1.17.0",
"files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
"destination": "wwwroot/lib/jquery-validation/dist/"
},
{
"library": "jquery-validation-unobtrusive@3.2.10",
"files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
"destination": "wwwroot/lib/jquery-validation-unobtrusive/"
},
{
"library": "twitter-bootstrap@3.3.7",
"files": [
"css/bootstrap.css",
"css/bootstrap.css.map",
"css/bootstrap.min.css",
"css/bootstrap.min.css.map",
"css/bootstrap-theme.css",
"css/bootstrap-theme.css.map",
"css/bootstrap-theme.min.css",
"css/bootstrap-theme.min.css.map",
"fonts/glyphicons-halflings-regular.eot",
"fonts/glyphicons-halflings-regular.svg",
"fonts/glyphicons-halflings-regular.ttf",
"fonts/glyphicons-halflings-regular.woff",
"fonts/glyphicons-halflings-regular.woff2",
"js/bootstrap.js",
"js/bootstrap.min.js",
"js/npm.js"
],
"destination": "wwwroot/lib/bootstrap/dist"
},
{
"library": "list.js@1.5.0",
"files": [ "list.js", "list.min.js" ],
"destination": "wwwroot/lib/listjs"
}
]
}
Nếu bạn di chuyển tệp, hãy đảm bảo rằng bạn cũng cập nhật _Layout.cshtml .
