Saya menggunakan npm untuk mengelola jQuery, Bootstrap, Font Awesome dan pustaka klien serupa yang saya perlukan untuk aplikasi ASP.NET Core saya.

Pendekatan yang berhasil untuk saya dimulai dengan menambahkan file package.json ke proyek, yang terlihat seperti ini:

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

npm mengembalikan paket-paket ini ke folder node_modules yang berada di level yang sama dengan wwwroot di direktori proyek:

Karena ASP.NET Core melayani file statis dari folder wwwroot, dan node_modules tidak ada di sana, saya harus membuat beberapa perubahan untuk membuat ini berfungsi, yang pertama: menambahkan app.UseFileServer tepat sebelum app.UseStaticFiles di Startup saya. file cs:

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

app.UseStaticFiles();

dan yang kedua, termasuk node_modules di publishOptions saya di file project.json:

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

Ini berfungsi di lingkungan pengembangan saya dan juga berfungsi saat saya menerapkannya ke instance Azure App Service saya, file statis jquery, bootstrap, dan font-awesome dilayani dengan baik, tetapi saya tidak yakin tentang penerapan ini.

Apa pendekatan yang tepat untuk melakukan ini?

Solusi ini datang setelah mengumpulkan banyak bit info dari beberapa sumber dan mencoba beberapa yang tidak berhasil, dan tampaknya agak aneh harus menyajikan file-file ini dari luar wwwroot.

Setiap saran akan sangat dihargai.

Dengan menerbitkan seluruh node_modulesfolder, Anda menyebarkan lebih banyak file daripada yang sebenarnya Anda perlukan dalam produksi.

Sebagai gantinya, gunakan runner tugas sebagai bagian dari proses build Anda untuk mengemas file yang Anda perlukan, dan menerapkannya ke wwwrootfolder Anda . Ini juga akan memungkinkan Anda untuk menggabungkan dan mengecilkan aset Anda pada saat yang sama, daripada harus menyajikan setiap perpustakaan secara terpisah.

Kemudian Anda juga dapat menghapus FileServerkonfigurasi sepenuhnya dan mengandalkannya UseStaticFiles.

Saat ini, gulp adalah pelari tugas VS pilihan. Tambahkan a gulpfile.jske root proyek Anda, dan konfigurasikan untuk memproses file statis Anda saat dipublikasikan.

Misalnya, Anda dapat menambahkan bagian berikut scriptske project.json:

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

Yang akan bekerja dengan gulpfile berikut (default saat scaffolding dengan 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"]);

• Menggunakan npmuntuk mengelola pustaka sisi klien adalah pilihan yang baik (dibandingkan dengan Bower atau NuGet), Anda berpikir ke arah yang benar :)
• Pisahkan proyek sisi server (ASP.NET Core) dan sisi klien (mis. Angular 2, Ember, React) ke dalam folder terpisah (jika tidak, proyek ASP.NET Anda mungkin memiliki banyak gangguan - pengujian unit untuk kode sisi klien, node_modules folder, membangun artefak, dll.). Pengembang front-end yang bekerja dalam tim yang sama dengan Anda akan berterima kasih untuk itu :)
• Pulihkan modul npm di tingkat solusi (sama seperti cara Anda memulihkan paket melalui NuGet - bukan ke folder proyek), dengan cara ini Anda juga dapat melakukan pengujian unit dan integrasi dalam folder terpisah (sebagai lawan dari pengujian JavaScript sisi klien di dalam Proyek ASP.NET Core).
• Penggunaan mungkin tidak perlu FileServer, memiliki StaticFilessudah cukup untuk menyajikan file statis (.js, gambar, dll.)
• Gunakan Webpack untuk menggabungkan kode sisi klien Anda menjadi satu atau beberapa potongan (bundel)
• Anda mungkin tidak memerlukan Gulp / Grunt jika Anda menggunakan bundler modul seperti Webpack
• Menulis skrip otomatisasi build di ES2015 + JavaScript (sebagai lawan Bash atau PowerShell), skrip ini akan berfungsi lintas platform dan lebih mudah diakses oleh berbagai pengembang web (semua orang berbicara JavaScript saat ini)
• Ubah nama wwwrootmenjadi public, jika tidak, struktur folder di Aplikasi Web Azure akan membingungkan ( D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public)
• Publikasikan hanya keluaran yang dikompilasi ke Azure Web Apps (Anda tidak boleh mendorong node_moduleske server hosting web). Lihat tools/deploy.jssebagai contoh.

Kunjungi ASP.NET Core Starter Kit di GitHub (penafian: Saya penulisnya)

Instal Bundler dan Minifier ke dalam ekstensi Visual Studio

Kemudian Anda membuat bundleconfig.jsondan memasukkan seperti berikut:

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

Jadi bundler dan minifier (berbasis gulp) memiliki akses ke file sumber (yang harus dikeluarkan dari Visual Studio dan juga dikecualikan dari GIT) dan menempatkannya ke dalam wwwroot seperti yang ditentukan

hanya efek samping setiap kali Anda menyimpannya yang akan menjalankan ini (tetapi Anda dapat mengaturnya untuk menjalankannya secara manual)

Saya memberi Anda dua jawaban. npm yang dikombinasikan dengan alat lain sangat berguna tetapi membutuhkan beberapa pekerjaan untuk menyiapkannya. Jika Anda hanya ingin mengunduh beberapa perpustakaan, Anda mungkin ingin menggunakan Manajer Perpustakaan sebagai gantinya (dirilis dalam Visual Studio 15.8).

NPM (Lanjutan)

Pertama tambahkan package.json di root proyek Anda. Tambahkan konten berikut:

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

Ini akan membuat NPM mengunduh Bootstrap, JQuery, dan pustaka lain yang digunakan dalam proyek inti asp.net baru ke folder bernama node_modules. Langkah selanjutnya adalah menyalin file ke tempat yang sesuai. Untuk melakukan ini kita akan menggunakan gulp, yang juga diunduh oleh NPM. Kemudian tambahkan file baru di root proyek Anda bernama gulpfile.js . Tambahkan konten berikut:

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

File ini berisi kode JavaScript yang dijalankan saat proyek dibangun dan dibersihkan. Ini akan menyalin semua file yang diperlukan ke lib2 ( bukan lib - Anda dapat dengan mudah mengubahnya ). Saya telah menggunakan struktur yang sama seperti di proyek baru, tetapi mudah untuk mengubah file ke lokasi yang berbeda. Jika Anda memindahkan file, pastikan Anda juga memperbarui _Layout.cshtml . Perhatikan bahwa semua file dalam direktori lib2 akan dihapus saat proyek dibersihkan.

Jika Anda mengklik kanan gulpfile.js , Anda dapat memilih Task Runner Explorer . Dari sini Anda dapat menjalankan gulp secara manual untuk menyalin atau membersihkan file.

Gulp juga bisa berguna untuk tugas lain seperti mengecilkan JavaScript dan file CSS:

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

Manajer Perpustakaan (Sederhana)

Klik kanan pada proyek Anda dan pilih Kelola perpustakaan sisi klien . File libman.json sekarang terbuka. Dalam file ini Anda menentukan pustaka dan file mana yang akan digunakan dan di mana mereka harus disimpan secara lokal. Sangat sederhana! Berkas berikut ini menyalin pustaka default yang digunakan saat membuat proyek ASP.NET Core 2.1 baru:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "[email protected]",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "[email protected]",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "[email protected]",
      "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": "[email protected]",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

Jika Anda memindahkan file, pastikan Anda juga memperbarui _Layout.cshtml .

Alih-alih mencoba melayani folder modul node, Anda juga dapat menggunakan Gulp untuk menyalin apa yang Anda butuhkan ke wwwroot.

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

Ini mungkin membantu juga

Visual Studio 2015 ASP.NET 5, Gulp tugas tidak menyalin file dari node_modules

Apa pendekatan yang tepat untuk melakukan ini?

Ada banyak pendekatan yang "benar", Anda tinggal memutuskan mana yang paling sesuai dengan kebutuhan Anda. Tampaknya Anda salah paham tentang cara menggunakan node_modules...

Jika Anda terbiasa dengan NuGet, Anda harus memikirkan npm sebagai mitra sisi kliennya. Dimana node_modulesdirektorinya seperti bindirektori NuGet . Idenya adalah bahwa direktori ini hanyalah lokasi umum untuk menyimpan paket, menurut pendapat saya lebih baik menggunakan dependencypaket yang Anda butuhkan seperti yang telah Anda lakukan di package.json. Kemudian gunakan pelari tugas seperti Gulpmisalnya untuk menyalin file yang Anda butuhkan ke wwwrootlokasi yang Anda inginkan .

Saya menulis posting blog tentang ini kembali pada bulan Januari yang merinci npm , Gulp dan sejumlah detail lainnya yang masih relevan hingga saat ini. Selain itu, seseorang meminta perhatian pada pertanyaan SO saya yang saya tanyakan dan akhirnya menjawab sendiri di sini , yang mungkin berguna.

Saya membuat Gistyang menunjukkan gulpfile.jssebagai contoh.

Di Anda Startup.cs, masih penting untuk menggunakan file statis:

app.UseStaticFiles();

Ini akan memastikan bahwa aplikasi Anda dapat mengakses apa yang dibutuhkannya.

Pendekatan yang jauh lebih sederhana adalah dengan menggunakan paket OdeToCode.UseNodeModules Nuget. Saya baru saja mengujinya dengan .Net Core 3.0. Yang perlu Anda lakukan adalah menambahkan paket ke solusi dan mereferensikannya di metode Konfigurasi kelas Startup:

app.UseNodeModules();

Saya mempelajarinya dari kursus Membangun Aplikasi Web dengan ASP.NET Core, MVC, Entity Framework Core, Bootstrap, dan kursus Angular Pluralsight yang luar biasa oleh Shawn Wildermuth.

Shawn Wildermuth memiliki panduan yang bagus di sini: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

Artikel tersebut tertaut ke gulpfile di GitHub tempat dia menerapkan strategi dalam artikel tersebut. Anda bisa menyalin dan menempelkan sebagian besar konten gulpfile ke milik Anda, tetapi pastikan untuk menambahkan paket yang sesuai di package.json di bawah devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

Saya telah menemukan cara yang lebih baik untuk mengelola paket JS dalam proyek saya dengan pelari tugas NPM Gulp / Grunt. Saya tidak suka ide untuk memiliki NPM dengan lapisan lain dari pustaka javascript untuk menangani "otomatisasi", dan persyaratan nomor satu saya adalah menjalankan pembaruan npm secara sederhana tanpa ada kekhawatiran lain tentang apakah saya perlu menjalankan hal-hal gulp, jika berhasil menyalin semuanya dan sebaliknya.

Cara NPM:

• Minifier JS sudah dibundel dalam inti ASP.net, cari bundleconfig.json jadi ini bukan masalah bagi saya (tidak menyusun sesuatu yang khusus)
• Hal yang baik tentang NPM adalah memiliki struktur file yang baik sehingga saya selalu dapat menemukan versi dependensi yang telah dikompilasi / dikecilkan sebelumnya di bawah node_modules / module / dist
• Saya menggunakan skrip NPM node_modules / .hooks / {eventname} yang menangani copy / update / delete file Project / wwwroot / lib / module / dist / .js, Anda dapat menemukan dokumentasinya di sini https: // docs.npmjs.com/misc/scripts (Saya akan memperbarui skrip yang saya gunakan untuk git setelah lebih dipoles) Saya tidak memerlukan pelari tugas tambahan ( alat .js yang tidak saya suka) apa yang membuat proyek saya bersih dan sederhana.

Cara python:

https://pypi.python.org/pyp ... tetapi dalam hal ini Anda perlu memelihara sumber secara manual

Mohon maafkan panjang posting ini.

Ini adalah contoh kerja menggunakan ASP.NET Core versi 2.5.

Sesuatu yang perlu diperhatikan adalah bahwa project.json sudah usang ( lihat di sini ) dan mendukung .csproj . Masalah dengan .csproj . file adalah sejumlah besar fitur dan faktanya tidak ada lokasi pusat untuk dokumentasinya ( lihat di sini ).

Satu hal lagi, contoh ini menjalankan inti ASP.NET di wadah Docker Linux (alpine 3.9); jadi jalannya akan mencerminkan itu. Ini juga menggunakan gulp ^ 4.0. Namun, dengan beberapa modifikasi, itu akan bekerja dengan versi lama dari ASP.NET Core, Gulp, NodeJS, dan juga tanpa Docker.

Tapi inilah jawabannya:

gulpfile.js lihat contoh kerja sebenarnya di sini

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

Tambahkan Target di file .csproj . Perhatikan kami juga menambahkan Watch untuk menonton dan mengecualikan jika kami memanfaatkan dotnet run watchperintah.

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>

Sekarang ketika dotnet run builddijalankan itu juga akan menginstal dan membangun modul node.