다른 사람들이 이미 언급했듯이 무거운 클라이언트 측 스크립팅에 의존하지 않는 응용 프로그램에서 이와 같은 종속성에 일반적으로 사용되는 패키지 관리자 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와 함께 클라이언트 측 개발 세계로 첫 번째 이동을 할 수 있습니다 .
