Я даю вам дві відповіді. npm у поєднанні з іншими інструментами є потужним, але вимагає певної роботи для налаштування. Якщо ви просто хочете завантажити деякі бібліотеки, ви можете замість цього використати Менеджер бібліотек (випущений у Visual Studio 15.8).
NPM (розширено)
Спочатку додайте package.json у корінь вашого проекту. Додайте наступний вміст:
{
"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"
}
}
Це змусить NPM завантажити Bootstrap, JQuery та інші бібліотеки, які використовуються в новому базовому проекті asp.net, у папку з назвою node_modules. Наступним кроком є копіювання файлів у відповідне місце. Для цього ми будемо використовувати gulp, який також був завантажений NPM. Потім додайте новий файл у корінь вашого проекту під назвою gulpfile.js . Додайте наступний вміст:
/// <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"));
});
Цей файл містить код JavaScript, який виконується під час збирання та очищення проекту. Це скопіює всі необхідні файли в lib2 ( не lib - ви можете легко змінити це ). Я використав таку ж структуру, що і в новому проекті, але змінити файли в інше місце легко. Якщо ви переміщуєте файли, переконайтеся, що ви також оновили _Layout.cshtml . Зауважте, що всі файли в каталозі lib2 будуть видалені після очищення проекту.
Якщо ви клацніть правою кнопкою миші на gulpfile.js , ви можете вибрати Explorer Runner Explorer . Звідси ви можете запустити глот вручну, щоб скопіювати чи очистити файли.
Gulp також може бути корисним для інших завдань, таких як мінімізація JavaScript та CSS-файлів:
https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1
Менеджер бібліотек (простий)
Клацніть правою кнопкою миші проект та виберіть Управління клієнтськими бібліотеками . Файл libman.json тепер відкритий. У цьому файлі ви вказуєте, яку бібліотеку та файли використовувати та де їх слід зберігати локально. Дійсно просто! Наступний файл копіює бібліотеки за замовчуванням, які використовуються при створенні нового проекту ASP.NET Core 2.1:
{
"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"
}
]
}
Якщо ви переміщуєте файли, переконайтеся, що ви також оновили _Layout.cshtml .
