ASP.NET Core uygulamam için ihtiyaç duyduğum jQuery, Bootstrap, Font Awesome ve benzeri istemci kitaplıklarını yönetmek için npm kullanıyorum.

Benim için işe yarayan yaklaşım, projeye bir package.json dosyası ekleyerek başladı, şöyle görünüyor:

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

npm bu paketleri proje dizinindeki wwwroot ile aynı seviyede bulunan node_modules klasörüne geri yükler:

ASP.NET Core, wwwroot klasöründen statik dosyalara hizmet ettiğinden ve node_modules orada olmadığından, bu işi yapmak için birkaç değişiklik yapmak zorunda kaldım, ilki: app. cs dosyası:

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

app.UseStaticFiles();

ve ikincisi, project.json dosyasındaki publishOptions'ımdaki node_modules dahil:

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

Bu benim geliştirme ortamımda çalışıyor ve Azure App Service örneğime dağıttığımda da çalışıyor, jquery, bootstrap ve font-awesome statik dosyalar iyi bir şekilde sunuluyor, ancak bu uygulamadan emin değilim.

Bunu yapmak için doğru yaklaşım nedir?

Bu çözüm, birkaç kaynaktan çok sayıda bilgi topladıktan ve işe yaramayan bazılarını denedikten sonra geldi ve bu dosyaları wwwroot dışından sunmak zorunda kalmak biraz garip görünüyor.

Herhangi bir tavsiye çok takdir edilecektir.

Tüm node_modulesklasörünüzü yayınlayarak , aslında üretimde ihtiyaç duyacağınızdan çok daha fazla dosyayı dağıtırsınız.

Bunun yerine, ihtiyaç duyduğunuz dosyaları paketlemek için oluşturma işleminizin bir parçası olarak bir görev çalıştırıcı kullanın ve bunları wwwrootklasörünüze dağıtın . Bu ayrıca, her bir kitaplığa ayrı ayrı hizmet vermek zorunda kalmadan, varlıklarınızı aynı anda birleştirmenize ve küçültmenize olanak tanır.

Daha sonra FileServeryapılandırmayı tamamen kaldırabilir ve UseStaticFilesbunun yerine güvenebilirsiniz .

Şu anda, yudum, VS görev koşucusudur. Eklegulpfile.js Projenizin köküne ve yayınlama üzerinde statik dosyaları işlemek için yapılandırın.

Örneğin, aşağıdaki scriptsbölümü kendi sayfanıza ekleyebilirsiniz project.json:

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

Aşağıdaki gulpfile ile çalışacak (iskele kurulurken varsayılan 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İstemci tarafı kitaplıklarını yönetmek için kullanmak iyi bir seçimdir (Bower veya NuGet'in aksine), doğru yönde düşünüyorsunuz :)
• Sunucu tarafını (ASP.NET Core) ve istemci tarafını (ör. Angular 2, Ember, React) projeleri ayrı klasörlere ayırın (aksi takdirde ASP.NET projenizde istemci tarafı kodu, node_modules için çok sayıda gürültü - birim testi olabilir) klasör, yapı oluşturma vb.). Sizinle aynı ekipte çalışan ön uç geliştiriciler bunun için size teşekkür edecek :)
• Çözüm düzeyinde npm modüllerini geri yükleyin (proje klasörüne değil, NuGet aracılığıyla paketleri nasıl geri yüklediğinize benzer şekilde), bu şekilde birim ve entegrasyon testlerini ayrı bir klasörde de yapabilirsiniz (içinde istemci tarafı JavaScript testlerine sahip olmanın aksine) ASP.NET Core projesi).
• Kullanmak gerekmeyebilir FileServer, sahip olunmasıStaticFilesStatik dosyaları (.js, resimler vb.) Sunmak için yeterli olmalıdır.
• İstemci tarafı kodunuzu bir veya daha fazla parça (paket) halinde paketlemek için Webpack'i kullanın
• Gulp / Grunt'a ihtiyacınız olmayabilirWebpack gibi bir modül paketleyici kullanıyorsanız Grunt'a ihtiyacınız olmayabilir
• ES2015 + JavaScript ile derleme otomasyon komut dosyaları yazın (Bash veya PowerShell'in aksine), platformlar arası çalışacaklar ve çeşitli web geliştiricileri için daha erişilebilir olacaklar (bugünlerde herkes JavaScript konuşuyor)
• Rename wwwrootiçin publicaksi Azure Web Uygulamalarında klasör yapısı (kafa karıştırıcı olacak, D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public)
• Azure Web Apps için yalnızca derlenmiş çıktıyı yayımlayın (hiçbir zaman node_modulesbir web barındırma sunucusuna göndermemelisiniz). tools/deploy.jsÖrnek olarak bakın .

GitHub'da ASP.NET Core Başlangıç ​​Kiti'ni ziyaret edin (sorumluluk reddi: Ben yazarım)

Bundler ve Minifier'ı yükleyin Visual Studio Extensions'a

Ardından bir oluşturup bundleconfig.jsonaşağıdakileri girersiniz:

// 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
  }
]

Böylece paketleyici ve minifier (gulp tabanlı) kaynak dosyalara erişebilir (bunlar Visual Studio'dan çıkarılmalıdır ve ayrıca GIT'den çıkarılmalıdır) ve bunları belirtildiği gibi wwwroot'a koyar

her kaydettiğinizde yalnızca yan etki bunu çalıştıracaktır (ancak manuel olarak çalıştıracak şekilde ayarlayabilirsiniz)

Size iki cevap veriyorum. Diğer araçlarla birleştirilen npm güçlüdür ancak kurulum için biraz çalışma gerektirir. Yalnızca bazı kitaplıkları indirmek istiyorsanız, bunun yerine Kitaplık Yöneticisi'ni kullanmak isteyebilirsiniz (Visual Studio 15.8'de yayınlandı).

NPM (Gelişmiş)

Öncelikle projenizin kök dizinine package.json dosyasını ekleyin . Aşağıdaki içeriği ekleyin:

{
  "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"
  }
}

Bu, NPM indirmesi Bootstrap, JQuery ve yeni bir asp.net çekirdek projesinde kullanılan diğer kitaplıkları node_modules adlı bir klasöre yapacaktır. Sonraki adım, dosyaları uygun bir yere kopyalamaktır. Bunu yapmak için NPM tarafından indirilen gulp kullanacağız. Ardından, projenizin kök dizinine gulpfile.js adlı yeni bir dosya ekleyin . Aşağıdaki içeriği ekleyin:

/// <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"));
});

Bu dosya, proje oluşturulduğunda ve temizlendiğinde yürütülen bir JavaScript kodunu içerir. Gerekli tüm dosyaları lib2'ye kopyalar ( lib'ye değil - bunu kolayca değiştirebilirsiniz ). Yeni bir projede olduğu gibi aynı yapıyı kullandım, ancak dosyaları farklı bir konuma değiştirmek çok kolay. Dosyaları taşırsanız, _Layout.cshtml'yi de güncellediğinizden emin olun. . Proje temizlendiğinde lib2 dizinindeki tüm dosyaların kaldırılacağını unutmayın.

Gulpfile.js'ye sağ tıklarsanız, Task Runner Explorer'ı seçebilirsiniz . Dosyaları kopyalamak veya temizlemek için buradan gulp'u manuel olarak çalıştırabilirsiniz.

Gulp, JavaScript ve CSS dosyalarını küçültme gibi diğer görevler için de yararlı olabilir:

https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

Kütüphane Yöneticisi (Basit)

Projenize sağ tıklayın ve İstemci tarafı kitaplıklarını yönet'i seçin . Libman.json dosyası artık açık. Bu dosyada hangi kitaplığın ve dosyaların kullanılacağını ve yerel olarak nerede depolanmaları gerektiğini belirtirsiniz. Gerçekten çok basit! Aşağıdaki dosya, yeni bir ASP.NET Core 2.1 projesi oluştururken kullanılan varsayılan kitaplıkları kopyalar:

{
  "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"
    }
  ]
}

Dosyaları taşırsanız, _Layout.cshtml'yi de güncellediğinizden emin olun .

Düğüm modülleri klasörüne hizmet etmeye çalışmak yerine, ihtiyacınız olanı wwwroot'a kopyalamak için Gulp'u da kullanabilirsiniz.

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

Bu da yardımcı olabilir

Visual Studio 2015 ASP.NET 5, Gulp görevi node_modules'ten dosya kopyalamıyor

Bunu yapmak için doğru yaklaşım nedir?

Pek çok "doğru" yaklaşım vardır, yalnızca hangisinin ihtiyaçlarınıza en uygun olduğuna siz karar verirsiniz. Görünüşe göre nasıl kullanılacağını yanlış anlıyorsun node_modules...

Eğer aşina iseniz Nuget aklınıza gerektiğini NPM onun istemci tarafı muadili olarak. Nerede node_modulesdizin gibidir biniçin dizine Nuget . Buradaki fikir, bu dizinin yalnızca paketleri depolamak için ortak bir konum olmasıdır, bence dependencyihtiyacınız olan paketleri package.json. Ardından Gulp, örneğin ihtiyacınız olan dosyaları istediğiniz wwwrootyere kopyalamak için bir görev çalıştırıcı kullanın .

Ocak ayında bununla ilgili olarak npm , Gulp ve bugün hala geçerli olan diğer birçok ayrıntıyı ayrıntılarıyla anlatan bir blog yazısı yazdım . Ek olarak, biri sorduğum SO soruma dikkat çekti ve sonunda burada kendime cevap verdi , bu muhtemelen yardımcı oldu.

Örnek olarak Gistgösteren bir yarattım gulpfile.js.

Sizin Startup.csiçinde statik dosyaları kullanmak hala önemlidir:

app.UseStaticFiles();

Bu, uygulamanızın ihtiyaç duyduğu şeye erişebilmesini sağlayacaktır.

Çok daha basit bir yaklaşım, OdeToCode.NodeModules Nuget paketini kullanmaktır . Net Core 3.0 ile test ettim. Tek yapmanız gereken paketi çözüme eklemek ve Startup sınıfının Configure yönteminde ona başvurmaktır:

app.UseNodeModules();

Bunu Shawn Wildermuth tarafından hazırlanan ASP.NET Core, MVC, Entity Framework Core, Bootstrap ve Angular Pluralsight kursuyla mükemmel bir Web Uygulaması Oluşturma kursundan öğrendim.

Shawn Wildermuth'un burada güzel bir rehberi var: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

Makale, makaledeki stratejiyi uyguladığı GitHub'daki gulp dosyasına bağlantı veriyor. Gulpfile içeriğinin çoğunu kopyalayıp kendinize yapıştırabilirsiniz, ancak uygun paketleri devDependencies altında package.json'a eklediğinizden emin olun: gulp gulp-uglify gulp-concat rimraf birleştirme-akışı

NPM Gulp / Grunt görev çalıştırıcıları ile projemde JS paketlerini nasıl yöneteceğimin daha iyi bir yolunu buldum. "Otomasyon" ile başa çıkmak için başka bir javascript kitaplığı katmanına sahip bir NPM'ye sahip olma fikrinden hoşlanmıyorum ve bir numaralı ihtiyacım, npm güncellemesini basit bir şekilde, yudum işlerini çalıştırmam gerekip gerekmediğiyle ilgili başka endişeler olmadan çalıştırmaktır. her şeyi başarıyla kopyaladıysa ve tersi.

NPM yolu:

• JS minifier zaten ASP.net çekirdeğinde paketlenmiştir, bundleconfig.json dosyasını arayın, bu yüzden bu benim için bir sorun değil (özel bir şey derlemek değil)
• NPM ile ilgili iyi olan şey, iyi bir dosya yapısına sahip olmasıdır, böylece node_modules / module / dist altında bağımlılıkların önceden derlenmiş / küçültülmüş sürümlerini her zaman bulabilirim
• Project / wwwroot / lib / module / dist / .js dosyalarının kopyalanmasını / güncellenmesini / silinmesini işleyen bir NPM node_modules / .hooks / {eventname} komut dosyası kullanıyorum , dokümantasyonu burada bulabilirsiniz https: // docs.npmjs.com/misc/scripts (Daha parlak hale geldikten sonra git için kullandığım komut dosyasını güncelleyeceğim) Ek görev çalıştırıcılara ihtiyacım yok ( sevmediğim .js araçları) projemi temiz ve basit tutan şey.

Python yolu:

https://pypi.python.org/pyp ... ancak bu durumda kaynakları manuel olarak korumanız gerekir

Lütfen bu yazının uzunluğunu mazur görün.

Bu, ASP.NET Core sürüm 2.5 kullanan çalışan bir örnektir.

Dikkat edilmesi gereken bir nokta, project.json dosyasının .csproj lehine eskimiş olmasıdır ( buraya bakın ) . .Csproj ile ilgili bir sorun . dosya, büyük miktarda özellik ve dokümantasyonu için merkezi bir konum bulunmamasıdır ( buraya bakın ).

Bir şey daha, bu örnek bir Docker Linux (alpine 3.9) konteynerinde ASP.NET core çalıştırıyor; böylece yollar bunu yansıtacak. Aynı zamanda yutkunma ^ 4.0 kullanır. Ancak, bazı değişikliklerle, ASP.NET Core, Gulp, NodeJS'nin eski sürümleriyle ve Docker olmadan da çalışması gerekir.

Ama işte bir cevap:

gulpfile.js burada gerçek çalışma örneğini görün

// 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
};

Bir ekleme Hedef içinde .csproj dosyasında. Ayrıca , komuttan yararlanırsak izlemek ve hariç tutmak için bir Saat eklediğimize dikkat edin 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>

Şimdi dotnet run buildçalıştırıldığında düğüm modüllerini de kuracak ve oluşturacaktır.