Estoy usando npm para administrar jQuery, Bootstrap, Font Awesome y bibliotecas de cliente similares que necesito para mi aplicación ASP.NET Core.

El enfoque que funcionó para mí comenzó agregando un archivo package.json al proyecto, que se ve así:

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

npm restaura estos paquetes en la carpeta node_modules que está en el mismo nivel que wwwroot en el directorio del proyecto:

Como ASP.NET Core sirve los archivos estáticos de la carpeta wwwroot, y node_modules no está allí, tuve que hacer un par de cambios para que esto funcione, el primero: agregar app.UseFileServer justo antes de app.UseStaticFiles en mi Startup. archivo cs:

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

app.UseStaticFiles();

y el segundo, que incluye node_modules en mis publishOptions en el archivo project.json:

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

Esto funciona en mi entorno de desarrollo y también funciona cuando lo implemento en mi instancia de Azure App Service, los archivos estáticos jquery, bootstrap y font-awesome se sirven bien, pero no estoy seguro de esta implementación.

¿Cuál es el enfoque correcto para hacer esto?

Esta solución vino después de recopilar muchos bits de información de varias fuentes y probar algunos que no funcionaron, y parece un poco extraño tener que entregar estos archivos desde fuera de wwwroot.

cualquier consejo será apreciado enormemente.

Publicando todo tu node_modules carpeta , está implementando muchos más archivos de los que realmente necesitará en producción.

En su lugar, utilice un ejecutor de tareas como parte de su proceso de compilación para empaquetar los archivos que necesita e implementarlos en su wwwroot carpeta. Esto también le permitirá concanear y minimizar sus activos al mismo tiempo, en lugar de tener que servir cada biblioteca individual por separado.

A continuación, también puede eliminar completamente el FileServer configuración y confiar en ella UseStaticFiles.

Actualmente, gulp es el corredor de tareas VS preferido. Agrega ungulpfile.js a la raíz de su proyecto y configúrelo para procesar sus archivos estáticos al publicar.

Por ejemplo, puede agregar la siguiente scriptssección a su project.json:

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

Que funcionaría con el siguiente gulpfile (el predeterminado cuando se hace un andamio con 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"]);

• Usar npmpara administrar bibliotecas del lado del cliente es una buena opción (a diferencia de Bower o NuGet), está pensando en la dirección correcta :)
• Divida los proyectos del lado del servidor (ASP.NET Core) y del lado del cliente (por ejemplo, Angular 2, Ember, React) en carpetas separadas (de lo contrario, su proyecto ASP.NET puede tener mucho ruido: pruebas unitarias para el código del lado del cliente, node_modules carpeta, construir artefactos, etc.). Los desarrolladores front-end que trabajan en el mismo equipo que usted se lo agradecerán :)
• Restaure los módulos npm en el nivel de la solución (de manera similar a cómo restaura paquetes a través de NuGet, no en la carpeta del proyecto), de esta manera también puede tener pruebas unitarias y de integración en una carpeta separada (en lugar de tener pruebas de JavaScript del lado del cliente dentro de su Proyecto ASP.NET Core).
• El uso puede no ser necesario FileServer, teniendoStaticFiles debería ser suficiente para servir archivos estáticos (.js, imágenes, etc.)
• Utilice Webpack para agrupar su código del lado del cliente en uno o más fragmentos (paquetes)
• Es posible que no necesite Gulp / Grunt si está utilizando un paquete de módulos como Webpack
• Escriba scripts de automatización de compilación en ES2015 + JavaScript (a diferencia de Bash o PowerShell), funcionarán en varias plataformas y serán más accesibles para una variedad de desarrolladores web (todos hablan JavaScript hoy en día)
• Cambie el nombre wwwroota public, de lo contrario, la estructura de carpetas en Azure Web Apps será confusa ( D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public)
• Publique solo la salida compilada en Azure Web Apps (nunca debe enviarla node_modulesa un servidor de alojamiento web). Vea tools/deploy.jscomo ejemplo.

Visite ASP.NET Core Starter Kit en GitHub (descargo de responsabilidad: soy el autor)

Instalar el Bundler y Minifier en Extensiones de Visual Studio

Luego crea un bundleconfig.jsone ingresa lo siguiente como:

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

Por lo tanto, el empaquetador y el minificador (basado en gulp) tiene acceso a los archivos de origen (que deben excluirse de Visual Studio y también de GIT) y los coloca en wwwroot como se especifica

solo el efecto secundario cada vez que lo guarde ejecutará esto (pero puede configurarlo para que lo ejecute manualmente)

Te doy dos respuestas. npm combinado con otras herramientas es poderoso pero requiere algo de trabajo para configurarlo. Si solo desea descargar algunas bibliotecas, es posible que desee utilizar el Administrador de bibliotecas lugar (lanzado en Visual Studio 15.8).

NPM (avanzado)

Primero agregue package.json en la raíz de su proyecto. Agrega el siguiente contenido:

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

Esto hará que NPM descargue Bootstrap, JQuery y otras bibliotecas que se utilizan en un nuevo proyecto principal de asp.net en una carpeta llamada node_modules. El siguiente paso es copiar los archivos en un lugar apropiado. Para hacer esto usaremos gulp, que también fue descargado por NPM. Luego agregue un nuevo archivo en la raíz de su proyecto llamado gulpfile.js . Agrega el siguiente contenido:

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

Este archivo contiene un código JavaScript que se ejecuta cuando el proyecto se crea y se limpia. Copiará todos los archivos necesarios en lib2 ( no lib; puede cambiarlo fácilmente ). He usado la misma estructura que en un proyecto nuevo, pero es fácil cambiar archivos a una ubicación diferente. Si mueve los archivos, asegúrese de actualizar también _Layout.cshtml . Tenga en cuenta que todos los archivos del directorio lib2 se eliminarán cuando se limpie el proyecto.

Si hace clic derecho en gulpfile.js , puede seleccionar Task Runner Explorer . Desde aquí puede ejecutar gulp manualmente para copiar o limpiar archivos.

Gulp también podría ser útil para otras tareas como minificar archivos JavaScript y CSS:

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

Administrador de biblioteca (simple)

Haga clic con el botón derecho en su proyecto y seleccione Administrar bibliotecas del lado del cliente . El archivo libman.json ahora está abierto. En este archivo, especifica qué biblioteca y archivos usar y dónde deben almacenarse localmente. ¡Realmente simple! El siguiente archivo copia las bibliotecas predeterminadas que se usan al crear un nuevo proyecto ASP.NET Core 2.1:

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

Si mueve los archivos, asegúrese de actualizar también _Layout.cshtml .

En lugar de intentar servir la carpeta de módulos de nodo, también puede usar Gulp para copiar lo que necesita en wwwroot.

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

Esto también podría ayudar

Visual Studio 2015 ASP.NET 5, la tarea Gulp no copia archivos de node_modules

¿Cuál es el enfoque correcto para hacer esto?

Hay muchos enfoques "correctos", solo tiene que decidir cuál se adapta mejor a sus necesidades. Parece que no está entendiendo cómo usar node_modules...

Si está familiarizado con NuGet , debería pensar en npm como su contraparte del lado del cliente. Donde el node_modulesdirectorio es como el bindirectorio de NuGet . La idea es que este directorio sea solo una ubicación común para almacenar paquetes, en mi opinión es mejor tomar dependencylos paquetes que necesita como lo ha hecho en el package.json. Luego use un corredor de tareas como, Gulppor ejemplo, para copiar los archivos que necesita en la wwwrootubicación deseada .

Escribí una publicación de blog sobre esto en enero que detalla npm , Gulp y un montón de otros detalles que aún son relevantes hoy. Además, alguien llamó la atención sobre mi pregunta SO que hice y finalmente me respondí aquí , lo que probablemente sea útil.

Creé un Gistque muestra gulpfile.jscomo ejemplo.

En su Startup.cssigue siendo importante utilizar archivos estáticos:

app.UseStaticFiles();

Esto asegurará que su aplicación pueda acceder a lo que necesita.

Un enfoque mucho más simple es usar el paquete OdeToCode.UseNodeModules Nuget. Lo acabo de probar con .Net Core 3.0. Todo lo que necesita hacer es agregar el paquete a la solución y hacer referencia a él en el método Configure de la clase Startup:

app.UseNodeModules();

Lo aprendí del excelente curso Creación de una aplicación web con ASP.NET Core, MVC, Entity Framework Core, Bootstrap y Angular Pluralsight de Shawn Wildermuth.

Shawn Wildermuth tiene una buena guía aquí: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

El artículo enlaza con el archivo gulp en GitHub donde implementó la estrategia en el artículo. Puede copiar y pegar la mayor parte del contenido del archivo gulp en el suyo, pero asegúrese de agregar los paquetes apropiados en package.json en devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

Encontré una mejor manera de administrar los paquetes JS en mi proyecto con los corredores de tareas NPM Gulp / Grunt. No me gusta la idea de tener un NPM con otra capa de biblioteca javascript para manejar la "automatización", y mi requisito número uno es simplemente ejecutar la actualización npm sin ninguna otra preocupación si necesito ejecutar gulp. si copió todo con éxito y viceversa.

La forma NPM:

• El minificador JS ya está incluido en el núcleo de ASP.net, busque bundleconfig.json para que esto no sea un problema para mí (no compilar algo personalizado)
• Lo bueno de NPM es que tiene una buena estructura de archivos, por lo que siempre puedo encontrar las versiones precompiladas / minificadas de las dependencias en node_modules / module / dist
• Estoy usando un script de NPM node_modules / .hooks / {eventname} que está manejando la copia / actualización / eliminación de los archivos Project / wwwroot / lib / module / dist / .js, puede encontrar la documentación aquí https: // docs.npmjs.com/misc/scripts (actualizaré el script que estoy usando para git una vez que esté más pulido) No necesito corredores de tareas adicionales ( herramientas .js que no me gustan) lo que mantiene mi proyecto limpio y simple.

La forma de Python:

https://pypi.python.org/pyp ... pero en este caso necesita mantener las fuentes manualmente

Disculpe la longitud de esta publicación.

Este es un ejemplo funcional con ASP.NET Core versión 2.5.

Algo a destacar es que project.json está obsoleto ( ver aquí ) a favor de .csproj . Un problema con .csproj . archivo es la gran cantidad de funciones y el hecho de que no hay una ubicación central para su documentación ( ver aquí ).

Una cosa más, este ejemplo es ejecutar ASP.NET core en un contenedor Docker Linux (alpine 3.9); para que los caminos reflejen eso. También usa gulp ^ 4.0. Sin embargo, con algunas modificaciones, debería funcionar con versiones anteriores de ASP.NET Core, Gulp, NodeJS y también sin Docker.

Pero aquí tienes una respuesta:

gulpfile.js vea el ejemplo de trabajo real aquí

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

Agregue un destino en el archivo .csproj . Tenga en cuenta que también agregamos un reloj para ver y excluir si aprovechamosdotnet run watch comando.

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>

Ahora, cuando dotnet run buildse ejecute, también instalará y creará módulos de nodo.