NuGet을 사용하여 ASP.NET Core의 Bootstrap을 업데이트하고 싶습니다. 나는 이것을 사용했다 :
Install-Package bootstrap -Version 4.0.0종속성을 추가했지만 지금 프로젝트에 어떻게 추가합니까? 로컬 NuGet 종속성의 경로는 무엇입니까?
답변
다른 사람들이 이미 언급했듯이 무거운 클라이언트 측 스크립팅에 의존하지 않는 응용 프로그램에서 이와 같은 종속성에 일반적으로 사용되는 패키지 관리자 Bower 는 나가는 중이며 다른 솔루션으로 이동할 것을 적극 권장합니다.
..psst! Bower가 유지되는 동안 새로운 프론트 엔드 프로젝트를 위해 yarn 및 webpack 을 권장 합니다!
따라서 지금도 여전히 사용할 수 있지만 Bootstrap은 지원 을 중단 한다고 발표 했습니다 . 결과적으로 기본 제공 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 설명 된대로 번들링 및 축소를 위해 를 소비하는 다양한 방법 중 하나를 사용할 수 있습니다 . 매우 쉬운 방법은 빌드 작업을 자동으로 설정 하는 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 와 같은 간단한 작업 관리자로 시작 하여 몇 가지 필요한 단계를 직접 수행 할 수도 있습니다 .
이를 위해 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대한 종속성을 갖도록 조정해야합니다 .gulpgulp-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실행 꿀꺽 작업 실행, build-vendor다음 우리의 빌드 작업, vendor.min.css그리고 vendor.min.js우리가 전에했던 것처럼합니다. 따라서 _Layout.cshtml위와 같이 조정 한 후 jQuery와 Bootstrap을 사용할 수 있습니다.
Gulp의 초기 설정은 bundleconfig.json위의 것보다 조금 더 복잡하지만, 이제 Node-world에 들어가서 다른 모든 멋진 도구를 사용할 수 있습니다. 따라서 이것부터 시작하는 것이 좋습니다.
결론
이것은 Bower를 사용하는 것보다 갑자기 훨씬 더 복잡해졌지만, 우리는 새로운 옵션으로 많은 제어권을 얻었습니다. 예를 들어, 이제 wwwroot폴더에 실제로 포함 된 파일과 파일이 정확히 어떻게 보이는지 결정할 수 있습니다 . 그리고 우리는 또한 이것을 사용하여 최소한 학습 곡선에 약간 도움이 되는 Node와 함께 클라이언트 측 개발 세계로 첫 번째 이동을 할 수 있습니다 .
답변
이것을 살펴보면 LibMan 접근 방식이 Bootstrap을 추가하여 내 요구에 가장 잘 맞는 것 같습니다. 이제 Visual Studio 2017 (15.8 이상)에 내장되어 있고 자체 대화 상자가 있기 때문에 마음에 듭니다.
2020 년 6 월 11 일 업데이트 : 이제 부트 스트랩 4.1.3이 VS-2019.5에 기본적으로 추가되었습니다 (알려준 Harald S. Hanssen에게 감사드립니다.)
VS가 프로젝트에 추가하는 기본 방법은 Bower를 사용하지만 나가는 것처럼 보입니다. Microsoft의 bower 페이지 헤더에 다음과 같이 작성합니다.
몇 가지 링크를 따라 가면 Visual Studio 에서 ASP.NET Core와 함께 LibMan을 사용하여 기본 제공 대화 상자를 사용하여 lib를 추가하는 방법 을 보여줍니다 .
솔루션 탐색기에서 파일을 추가해야하는 프로젝트 폴더를 마우스 오른쪽 단추로 클릭합니다. 추가> 클라이언트 측 라이브러리를 선택합니다. 클라이언트 측 라이브러리 추가 대화 상자가 나타납니다. [출처 : Scott Addie 2018 ]
그런 다음 부트 스트랩의 경우 (1) unpkg를 선택하고 (2) “bootstrap @ ..”을 입력합니다. (3) 설치합니다. 그런 다음 _Layout.cshtml 또는 다른 위치의 모든 포함이 올바른지 확인하고 싶을 것입니다. 그들은 같은 것을해야 “… ~ / lib 디렉토리 / 부트 스트랩 / DIST / JS / 부트 스트랩”HREF = )
답변
Libman을 사용해보십시오. Bower만큼 간단하며 다운로드 폴더로 wwwroot / lib /를 지정할 수 있습니다.
답변
나에게 트릭은 무엇입니까?
1) wwwroot> 추가> 클라이언트 측 라이브러리를 마우스 오른쪽 버튼으로 클릭합니다.
2) 검색 창에 “bootstrap”입력
3) “특정 파일 선택”을 선택하십시오.
4) 아래로 스크롤하여 폴더를 선택합니다. 제 경우에는 “twitter-bootstrap”을 선택했습니다
5) “css”및 “js”확인
6) “설치”를 클릭합니다.
몇 초 후 모든 wwwroot 폴더가 생겼습니다. 추가하려는 모든 클라이언트 측 패키지에 대해 동일하게 수행하십시오.
답변
Libman은 현재 Microsoft에서 선호하는 도구 인 것 같습니다. Visual Studio 2017 (15.8)에 통합되었습니다.
이 문서에서는이 를 사용하는 방법과 빌드 프로세스에서 수행되는 복원을 설정하는 방법까지 설명합니다.
Bootstrap의 문서 는 프로젝트에 필요한 파일을 알려줍니다.
다음 예제는 libman.json의 구성으로 작동해야합니다.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "twitter-bootstrap@4.2.1",
"destination": "wwwroot/lib/bootstrap",
"files": [
"js/bootstrap.bundle.js",
"css/bootstrap.min.css"
]
},
{
"library": "jquery@3.3.1",
"destination": "wwwroot/lib/jquery",
"files": [
"jquery.min.js"
]
}
]}
답변
asp.net 코어에서 부트 스트랩 4를 사용하지만 “패키지 설치 프로그램”확장을 사용하여 “npm”의 라이브러리를 참조하고 이것이 Javascript / CSS 라이브러리 용 Nuget보다 나은 것으로 나타났습니다.
그런 다음 “Bundler & Minifier”확장을 사용하여 배포 용 관련 파일 (프로젝트 외부에있는 npm node_modules 폴더에서)을 개발 / 배포를 위해 원하는대로 wwwroot로 복사합니다.
답변
불행히도 NuGet을 사용하여 .NET Core 프로젝트에 Bootstrap (또는 대부분의 다른 JavaScript / CSS 프레임 워크)을 설치하는 데 어려움을 겪을 것입니다. NuGet 설치를 보면 호환되지 않는다는 메시지가 표시됩니다.
로컬 패키지 종속성이 어디에 있는지 알아야하는 경우 이제 로컬 프로필 디렉터리에 있습니다. 즉 %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts.
그러나 Saineshwar의 답변과 같이 npm 또는 bower로 전환하는 것이 좋습니다.
