ASP를 관리합니다.NET 핵심 MVC 전단 의존항과 npm 및 웹팩 (제1부분)
그러나 시작은 쉽다.
web 템플릿을 선택하든지, 거의 비어 있는 항목을 선택하든지, mvc 또는 webapp 템플릿을 선택하든지, 더 많은 템플릿 파일을 선택하든지.두 가지 모두 각자의 장점이 있다.
dotnet new web:거의아무것도 아니에요.하면, 만약, 만약...
너는 이미 준비가 다 되었다
긁다.
dotnet new mvc(또는 webapp): 메가파운드 하나 드릴게요.단번에
시간이 지나 프로젝트와 함께 묶여
이것은 결코 많은 변화의 공간을 제공하지 않았다.
(
webapp은 페이지 기반 프로젝트를 생성합니다.mvc 모델 뷰 컨트롤러 프로젝트 생성) angular 템플릿이나 react 템플릿에서 시작하지 않았을 때입니다.여러 페이지/보기와 관련된 일을 하고 싶거나, 제공하는 프레임워크가 아닌 SPA 프레임워크를 사용하고 싶더라도 (예: Vue 또는 Svelte!)그럼 이 안내서가 설치해 드릴게요!우리 뭐하지?
사용자 정의 전단 의존 항목이 있는 항목입니다.
이것은 전문적으로 다루는 여러 페이지의 응용 프로그램이 될 것이다
우리의 필요.더 구체적으로 말하면...
프로젝트의 의존성
항목의 일부.그래서 저희 프로젝트 트리가...
더 이상
JS와 지도 파일을 축소합니다.
ASP에서만 참조됩니다.NET 형식
it still depends on it부터 효력이 발생한다.
npm와 웹 패키지를 사용합니다.모든 JavaScript
CSS 코드는
이것은 구축 임무다.모든
.js 및 .css파일은 별도의 src 디렉토리에 저장됩니다.오직구축 공작물은
wwwroot에서 끝난다.우리 왜 이러는지
무엇보다 MVC 템플릿이 너무 확고하고 경직돼 있다는 점이 중요하다.프로젝트에 새로운 프런트엔드 라이브러리를 추가하는 것은 어려운 일이며, 이렇게 해서는 안 된다.
프로젝트에 NuGet 패키지를 추가하면 프로젝트 트리에 많은 DLL이 생성되지 않습니다.전방에 라이브러리를 추가할 때, 이 두 가지 상황은 모두 발생해서는 안 된다.또한 NuGet 패키지와 같은 정확한 버전 번호를 사용하도록 제어하고자 합니다.
이 과정에서 우리는 어떻게 수영 외에 웹 패키지를 사용하는지 더욱 잘 이해할 것이다!
우리 시작합시다!
프로젝트 만들기
당신이 필요로 하는 것은:
NodeJS with bundled npm
(또는 사선) 저는 16.14.0을 씁니다.
기능 명령행!
$ dotnet new mvc
.gitignore 파일을 계속 만듭니다.고맙게도 또 하나의 단독이 있다.NET 템플릿으로 이 문제를 처리합니다.프로젝트 디렉토리에 다음과 같이 입력할 수 있습니다.$ dotnet new gitignore
$ dotnet run
Properties/launchSettings.json)을 수행하고 localhost으로 이동합니다.이 시작 항목은 Gitlab에서 찾을 수 있으며 주소는 the first version/Net6NpmWebpack입니다.
프런트엔드 종속성
그런 다음 MVC 프로젝트의 루트 디렉토리에
ClientApp이라는 새 디렉토리를 만듭니다.이 새 디렉터리에 package.json이라는 파일을 만듭니다.다음을 제공합니다.{
"name": "Net6NpmWebpack",
"description": "ASP.NET Core MVC project with npm and webpack front-end configuration.",
"repository": "https://gitlab.com/kdg-ti/integratieproject-1/guides/net6npmwebpack",
"license": "MIT",
"version": "4.0.0",
"dependencies": {
"@popperjs/core": "^2.11.2",
"jquery": "^3.6.0",
"jquery-validation": "^1.19.3",
"jquery-validation-unobtrusive": "^3.2.12",
"bootstrap": "^5.1.3"
},
"devDependencies": {
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"css-loader": "^6.7.1",
"style-loader": "^3.3.1"
},
"scripts": {
"build": "webpack"
}
}
우리가 지정한 뚜렷한 필드를 제외하고는:
dependencies: 부트 5, JQuery,및 Popper(팝업 배치용 Bootstrap 사용)
devDependencies: 패키지 및 패키지 관련적재기.우리는 우리의 전단 코드를 묶기 위해 이것들이 필요하다.
scripts: 호출웹 패키지 번들 프로세스
ClientApp 디렉토리에서 실행합니다.$ npm install
node_modules 디렉토리가 팝업되고 JS와 CSS 파일이 많이 포함됩니다.이 디렉토리를 bin 및 obj 디렉토리로 간주합니다(또는 NuGet 패키지 캐시).비록 이것은 어떠한 바이너리 파일도 포함하지 않지만, 그것의 내용은 여전히 우리가 자신의 코드에서 인용한 대량의 의존항이다....하지만 우리는 아직 아무런 코드도 없다.
src에 ClientApp 디렉터리를 만들고 이 위치에 js과 css 디렉터리를 추가합니다.site.js 디렉토리에 js이라는 새 파일을 만들고 wwwroot/css/site.css과 Views/Shared/_Layout.cshtml.css의 컨텐츠를 ClientApp/src/css으로 이동합니다.다음과 같이 하십시오.ClientApp/
├── package-lock.json
├── package.json
└── src
├── css
│ └── site.css # contents of wwwroot/css/site.css and Views/Shared/_Layout.cshtml.css
└── js
└── site.js # newly created
wwwroot/css과 wwwroot/js을 완전히 삭제하고 Views/Shared/_Layout.cshtml.css을 삭제하는 데 시간이 걸립니다.site.js에서는 사이트 전체와 관련된 사용자 정의 JavaScript 코드를 작성합니다.또한 이 파일을 사용하여 모든 사이트 범위의 종속성을 가져옵니다.// JS Dependencies: Popper, Bootstrap & JQuery
import '@popperjs/core';
import 'bootstrap';
import 'jquery';
// Using the next two lines is like including partial view _ValidationScriptsPartial.cshtml
import 'jquery-validation';
import 'jquery-validation-unobtrusive';
// CSS Dependencies: Bootstrap
import 'bootstrap/dist/css/bootstrap.css';
// Custom JS imports
// ... none at the moment
// Custom CSS imports
import '../css/site.css';
console.log('The \'site\' bundle has been loaded!');
node_modules에서 코드를 가져옵니다.Bootstrap의 Javascript, Popper, CSS, 그리고 ASP에서 사용하는 몇 개의 JQuery 라이브러리를 가져오고 있습니다.NET 코어의 검증 스크립트입니다.이 모든 것은 ECMAScript 6 modules으로 완성된 것으로 다른 JS 파일, 심지어 JS 파일에서 CSS 파일을 가져오는 현대적인 방법이다.
지금... 우리는 어떻게 해야만 이 코드들을 사용자의 브라우저에 입력할 수 있습니까?우리가 방금 만든 파일은 17줄 코드만 포함하지만, 일부 라이브러리와 사용자 정의 CSS 코드를 가져옵니다.우리는 단지 사용자에게
node_modules을 던질 뿐입니까?당연히 아니지!이 디렉터리는 매우 커서, 우리는 꼼꼼하게 선별, 묶음, 위탁 관리 운행에 필요한 부분을 선택해야 한다.이것이 바로 웹 패키지의 용무의 땅이다!
번들 구성
webpack.config.js이라는 새 파일을 만들고 ClientApp 디렉터리에 저장합니다.다음을 제공합니다.const path = require('path');
module.exports = {
entry: {
site: './src/js/site.js'
},
output: {
filename: '[name].entry.js',
path: path.resolve(__dirname, '..', 'wwwroot', 'dist')
},
devtool: 'source-map',
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
type: 'asset'
},
]
}
};
src/js/site.js을 바탕으로 bundle를 만들어야 한다고 지정했다. 이 bundle는 site.entry.js([name]의 자리 차지 문자가'site'로 바뀐다)이라고 해야 한다.패키지는 스마트해서 패키지에 어떤 내용이 포함되어야 하는지 확인할 수 있다. 패키지의 결정은 우리가
site.js에서 한 일에 기반을 두고 있다.예를 들어, JQuery를 가져오면 JQuery가 패키지에 포함됩니다.site.js에서 CSS 파일을 가져오는 것을 선택하면 Bootstrap에서 온 CSS 파일도 가방에 포함됩니다.(아래쪽 rules 섹션에서는 이러한 비JS 파일을 처리하는 방법을 지정했습니다.)좋습니다.
ClientApp 디렉토리에서 다음 명령을 사용하여 구축해 보겠습니다.$ npm run build
webpack 명령을 집행하는데 위 scripts의 package.json 부분과 같다.이렇게 하면 두 개의 새 파일이 생성됩니다.
wwwroot/dist/
├── site.entry.js
└── site.entry.js.map
Views/Shared/_Layout.cshtml을 열고 모든 script과 link 라벨을 교체합니다(밑에 라벨이라도!)단 한 줄: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - net6npmwebpack</title>
+ <script src="~/dist/site.entry.js" defer></script>
- <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
- <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
- <link rel="stylesheet" href="~/net6npmwebpack.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">net6npmwebpack</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - net6npmwebpack - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
- <script src="~/lib/jquery/dist/jquery.min.js"></script>
- <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
- <script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
defer은 이 파일의 실행이 페이지가 완전히 불러올 때까지 지연되어야 한다는 것을 나타낸다.이것은 스크립트가 DOM을 스캔하기 전에 문서를 완전히 다운로드할 수 있도록 모든 script 태그를 문서 밑에 두는 현대적인 대안입니다.프로젝트 트리에서 마지막 혼란을 삭제할 때가 되었습니다.
$ rm -rf wwwroot/lib
site.css의 가장 중요한 댓글을 삭제할 때가 됐다.어떤 축소 참고든지 간에 우리는 어쨌든 이 길을 가지 않을 것이다.git를 사용한다면
wwwroot/dist/을 .gitignore에 추가하십시오.됐어, 가볼 때가 됐어!
$ dotnet run
localhost을 열고 브라우저 콘솔(F12)을 확인합니다."사이트 패키지가 불러왔습니다."라는 메시지를 보실 수 있을 것입니다.이게 얼마나 멋있어요?전단의 모든 의존항은 현재 동적 다운로드, 구축, 귀속을 할 수 있습니다.시스템 구축은 확장 가능하고 모든 의존항을 쉽게 관리할 수 있으며 필요하면 바꿀 수 있습니다!
지금까지 이 프로젝트는 Gitlab에서 찾을 수 있으며 주소는 version 2/Net6NpmWebpack이다.
다음은요?
우리는 아직 완성하지 못했다.우리의 업무 명세서에는 두 가지 중요한 일이 있다.
공연!두 모드 간 빠른 전환 시도
수욕 센터의 다른 페이지.딜레이가 보일 거예요.
Bootstrap의 CSS를 적용하기 전에이것 은
대량의 CSS가 삽입됨
런타임에 페이지를 엽니다.이게 제일 긴급한 거예요.
해결해야 할 문제는 사용자 체험이 너무 나쁘다는 것이다
중요!
프로젝트를 하나의 전체로 건설하다.이것 보세요
중점은 세우는 것이다.NET 항목은 트리거되지 않습니다.
전면 복구.정말 짜증나!
Reference
이 문제에 관하여(ASP를 관리합니다.NET 핵심 MVC 전단 의존항과 npm 및 웹팩 (제1부분)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larswillemsens/managing-asp-net-core-mvc-front-end-dependencies-with-npm-and-webpack-part-1-3jf5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
