npm을 사용하여 ASP.NET Core 애플리케이션에 필요한 jQuery, Bootstrap, Font Awesome 및 유사한 클라이언트 라이브러리를 관리하고 있습니다.

나를 위해 일한 접근 방식은 프로젝트에 package.json 파일을 추가하는 것으로 시작되었습니다.

{
    "version": "1.0.0",
    "name": "myapp",
    "private": true,
    "devDependencies": {
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.1",
    "jquery": "^2.2.3"
  }
}

npm은 이러한 패키지를 프로젝트 디렉터리의 wwwroot와 동일한 수준에있는 node_modules 폴더로 복원합니다.

ASP.NET Core가 wwwroot 폴더의 정적 파일을 제공하고 node_modules가 거기에 없기 때문에이 작업을 수행하기 위해 몇 가지 변경 작업을 수행해야했습니다. cs 파일 :

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

두 번째는 project.json 파일의 publishOptions에있는 node_modules를 포함합니다.

"publishOptions": {
  "include": [
    "web.config",
    "wwwroot",
    "Views",
    "node_modules"
  ]
},

이것은 내 개발 환경에서 작동하며 Azure App Service 인스턴스에 배포 할 때도 작동하며 jquery, 부트 스트랩 및 글꼴 멋진 정적 파일이 제대로 제공되지만이 구현에 대해 확신 할 수 없습니다.

이를위한 올바른 접근 방식은 무엇입니까?

이 솔루션은 여러 소스에서 많은 정보를 수집하고 작동하지 않는 일부를 시도한 후에 나 왔으며, 이러한 파일을 wwwroot 외부에서 제공해야하는 것은 약간 이상해 보입니다.

어떤 조언이라도 대단히 감사하겠습니다.

전체 node_modules폴더를 게시 하면 실제 프로덕션에 필요한 것보다 훨씬 많은 파일을 배포하게됩니다.

대신 빌드 프로세스의 일부로 태스크 실행기를 사용하여 필요한 파일을 패키징하고 wwwroot폴더에 배포하십시오 . 이렇게하면 개별 라이브러리를 개별적으로 제공 할 필요없이 동시에 자산을 연결하고 축소 할 수 있습니다.

그런 다음 FileServer구성을 완전히 제거하고 UseStaticFiles대신 사용할 수도 있습니다.

현재 gulp는 VS 작업 실행기입니다. gulpfile.js프로젝트의 루트에를 추가하고 게시시 정적 파일을 처리하도록 구성합니다.

예를 들어 다음 scripts섹션을에 추가 할 수 있습니다 project.json.

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

다음 gulpfile과 함께 작동합니다 (으로 스캐 폴딩 할 때 기본값 yo).

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

• npm클라이언트 측 라이브러리를 관리하는 데 사용 하는 것이 좋은 선택입니다 (Bower 또는 NuGet과 반대). 올바른 방향으로 생각하고 있습니다. :)
• 서버 측 (ASP.NET Core) 및 클라이언트 측 (예 : Angular 2, Ember, React) 프로젝트를 별도의 폴더로 분할 (그렇지 않으면 ASP.NET 프로젝트에 많은 노이즈가있을 수 있음-클라이언트 측 코드, node_modules에 대한 단위 테스트) 폴더, 빌드 아티팩트 등). 당신과 같은 팀에서 일하는 프런트 엔드 개발자는 그것에 대해 감사 할 것입니다 :)
• 솔루션 수준에서 npm 모듈을 복원합니다 (프로젝트 폴더가 아닌 NuGet을 통해 패키지를 복원하는 방법과 유사 함). 이렇게하면 별도의 폴더에서 단위 및 통합 테스트를 수행 할 수 있습니다 (클라이언트 측 JavaScript 테스트를 내부에 두는 것과는 반대). ASP.NET Core 프로젝트).
• 사용은 필요하지 않을 수 있으며 정적 파일 (.js, 이미지 등)을 제공하는 FileServer데 StaticFiles충분해야합니다.
• Webpack을 사용하여 클라이언트 측 코드를 하나 이상의 청크 (번들)로 묶습니다.
• Webpack과 같은 모듈 번 들러를 사용하는 경우 Gulp / Grunt가 필요하지 않을 수 있습니다.
• ES2015 + JavaScript로 빌드 자동화 스크립트를 작성합니다 (Bash 또는 PowerShell과 반대). 크로스 플랫폼에서 작동하고 다양한 웹 개발자가 더 쉽게 액세스 할 수 있습니다 (요즘은 모두 JavaScript를 사용합니다).
• 이름 wwwroot을로 바꾸십시오 public. 그렇지 않으면 Azure Web Apps의 폴더 구조가 혼란스러워집니다 ( D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public).
• 컴파일 된 출력 만 Azure Web Apps에 게시합니다 ( node_modules웹 호스팅 서버로 푸시해서는 안 됨 ). tools/deploy.js예를 참조하십시오 .

GitHub의 ASP.NET Core Starter Kit 방문 (고지 사항 : 저자입니다)

설치 Bundler를하고 Minifier을 비주얼 스튜디오 확장에

그런 다음 a를 만들고 bundleconfig.json다음과 같이 입력합니다.

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

따라서 번 들러 및 minifier (gulp 기반)는 소스 파일 (Visual Studio에서 제외되고 GIT에서도 제외되어야 함)에 액세스 할 수 있으며 지정된대로 wwwroot에 넣습니다.

저장할 때마다 부작용만이 실행됩니다 (그러나 수동으로 실행하도록 설정할 수 있음)

두 가지 대답을드립니다. 다른 도구와 결합 된 npm 은 강력하지만 설정하려면 약간의 작업이 필요합니다. 일부 라이브러리 만 다운로드하려는 경우 대신 Library Manager (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이 새 asp.net 핵심 프로젝트에서 사용되는 Bootstrap, JQuery 및 기타 라이브러리를 node_modules라는 폴더에 다운로드합니다. 다음 단계는 파일을 적절한 위치에 복사하는 것입니다. 이를 위해 NPM에서 다운로드 한 gulp를 사용합니다. 그런 다음 프로젝트 루트에 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 를 마우스 오른쪽 버튼으로 클릭 하면 Task Runner Explorer를 선택할 수 있습니다 . 여기에서 수동으로 gulp를 실행하여 파일을 복사하거나 정리할 수 있습니다.

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 도 업데이트해야합니다 .

노드 모듈 폴더를 제공하는 대신 Gulp를 사용하여 필요한 것을 wwwroot에 복사 할 수도 있습니다.

https://docs.asp.net/en/latest/client-side/using-gulp.html

이것도 도움이 될 수 있습니다

Visual Studio 2015 ASP.NET 5, Gulp 작업이 node_modules에서 파일을 복사하지 않음

이를위한 올바른 접근 방식은 무엇입니까?

"올바른"접근 방식이 많이 있으며, 귀하의 요구에 가장 적합한 제품군을 결정하기 만하면됩니다. 사용 방법을 오해하는 것 같습니다 node_modules...

NuGet에 익숙하다면 npm 을 클라이언트 측 대응 물로 생각해야합니다 . 어디 node_modules디렉토리는 같다 bin대한 디렉토리 NuGet . 아이디어는이 디렉토리가 패키지를 저장하는 일반적인 위치 일뿐입니다. 제 생각 dependency에는 .NET Framework에서했던 것처럼 필요한 패키지 를 가져 오는 것이 좋습니다 package.json. 그런 다음 Gulp예를 들어 작업 실행기를 사용하여 필요한 파일을 원하는 wwwroot위치 에 복사하십시오 .

저는 1 월에 npm , Gulp 및 오늘날에도 여전히 관련이있는 기타 세부 사항을 자세히 설명 하는 블로그 게시물을 작성했습니다 . 또한 누군가가 내 질문에 관심을 불러 일으켰고 궁극적으로 여기 에서 스스로 대답했습니다 .

I가 생성 Gist하는 표시를 gulpfile.js예시한다.

당신의에서 Startup.cs이 정적 파일을 사용하는 게 중요합니다 :

app.UseStaticFiles();

이렇게하면 애플리케이션이 필요한 항목에 액세스 할 수 있습니다.

훨씬 간단한 방법은 OdeToCode.UseNodeModules Nuget 패키지 를 사용하는 것 입니다. 방금 .Net Core 3.0으로 테스트했습니다. 솔루션에 패키지를 추가하고 Startup 클래스의 Configure 메서드에서 참조하기 만하면됩니다.

app.UseNodeModules();

Shawn Wildermuth 의 뛰어난 ASP.NET Core, MVC, Entity Framework Core, Bootstrap 및 Angular Pluralsight를 사용 하여 웹 앱 빌드 과정에서 이에 대해 배웠습니다 .

Shawn Wildermuth는 여기에 멋진 가이드가 있습니다 : https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

이 기사는 그가 기사에서 전략을 구현 한 GitHub의 gulpfile에 연결됩니다. 대부분의 gulpfile 내용을 복사하여 붙여 넣을 수 있지만 devDependencies 아래 package.json에 적절한 패키지를 추가해야합니다. gulp gulp-uglify gulp-concat rimraf merge-stream

NPM Gulp / Grunt 태스크 러너를 사용하여 프로젝트에서 JS 패키지를 관리하는 더 좋은 방법을 찾았습니다. 나는 "자동화"를 처리하기 위해 자바 스크립트 라이브러리의 다른 레이어가있는 NPM을 가지고 있다는 생각이 마음에 들지 않습니다. 내 가장 중요한 요구 사항은 꿀꺽 꿀꺽 작업을 실행해야 할 경우 다른 걱정없이 npm 업데이트를 간단하게 실행하는 것입니다. 모든 것을 성공적으로 복사했다면 그 반대의 경우도 마찬가지입니다.

NPM 방식 :

• JS minifier는 이미 ASP.net 코어에 번들로 포함되어 있으므로 bundleconfig.json을 찾으십시오. 그래서 이것은 나에게 문제가되지 않습니다 (사용자 정의 컴파일하지 않음)
• NPM의 좋은 점은 좋은 파일 구조를 가지고 있기 때문에 node_modules / module / dist 아래에서 항상 미리 컴파일 된 / 최소화 된 버전의 종속성을 찾을 수 있다는 것입니다.
• Project / wwwroot / lib / module / dist / .js 파일 의 복사 / 업데이트 / 삭제를 처리하는 NPM node_modules / .hooks / {eventname} 스크립트를 사용 하고 있습니다. 여기에서 설명서를 찾을 수 있습니다. https : // docs.npmjs.com/misc/scripts (좀 더 다듬어지면 git에 사용하는 스크립트를 업데이트하겠습니다) 추가 작업 실행자가 필요하지 않습니다 (좋지 않는 .js 도구). 내 프로젝트를 깨끗하고 간단하게 유지합니다.

파이썬 방식 :

https://pypi.python.org/pyp ...하지만이 경우 소스를 수동으로 유지해야합니다.

이 게시물의 길이를 용서하십시오.

이것은 ASP.NET Core 버전 2.5를 사용하는 실제 예제입니다.

주목할 점은 project.json 이 .csproj 를 선호하여 더 이상 사용되지 않는다는 것입니다 ( 여기 참조 ) . .csproj 문제 . 파일은 많은 양의 기능이며 문서화를위한 중앙 위치가 없다는 사실입니다 ( 여기 참조 ).

한 가지 더,이 예제는 Docker Linux (alpine 3.9) 컨테이너에서 ASP.NET 코어를 실행하고 있습니다. 경로가이를 반영합니다. 꿀꺽 꿀꺽 ^ 4.0도 사용합니다. 그러나 약간의 수정을 통해 이전 버전의 ASP.NET Core, Gulp, NodeJS 및 Docker 없이도 작동해야합니다.

그러나 여기에 답이 있습니다.

gulpfile.js 는 실제 작동 예제를 참조하십시오.

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

.csproj 파일에 대상 을 추가 합니다. 명령 을 활용하는 경우 감시 및 제외 할 Watch 도 추가했습니다 .dotnet run watch

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

이제 dotnet run build실행 되면 노드 모듈도 설치 및 빌드됩니다.