Как использовать НПМ с ASP.NET основной

Я использую npm для управления jQuery, Bootstrap, Font Awesome и подобными клиентскими библиотеками, которые мне нужны для моего ASP.NET основное применение.



подход, который работал для меня, начался с добавления пакета.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 восстанавливает эти пакеты в папку node_modules, которая находится на том же уровне, что и wwwroot в каталоге проекта:



enter image description here



как ASP.NET ядро обслуживает статические файлы из папки wwwroot, а node_modules там нет, мне пришлось сделать несколько изменений, чтобы сделать эту работу, первый: добавление приложения.UseFileServer прямо перед приложением.UseStaticFiles в моем стартапе.cs файл:



app.UseFileServer(new FileServerOptions()

{

    FileProvider = new PhysicalFileProvider(

        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 

    RequestPath = new PathString("/node_modules"),

    EnableDirectoryBrowsing = true

});



app.UseStaticFiles();


и второй, включая node_modules в моих publishOptions в проекте.JSON-файл:



"publishOptions": {

  "include": [

    "web.config",

    "wwwroot",

    "Views",

    "node_modules"

  ]

},


это работает в моей среде разработки, а также работает, когда я развертываю его в своем экземпляре службы приложений Azure, jquery, bootstrap и font-awesome статические файлы обслуживаются хорошо, но я не уверен в этой реализации.



каков правильный подход для этого?



Это решение появилось после сбора большого количества бит информации из нескольких источников и попытки некоторых из них не сработали, и кажется немного странным, что нужно обслуживать эти файлы извне wwwroot.



любой совет будет очень признателен.

1170   8  

8 ответов:

публикуя весь ваш node_modules папка вы развертываете гораздо больше файлов, чем вам действительно нужно в производстве.

вместо этого используйте Task runner как часть процесса сборки, чтобы упаковать необходимые файлы и развернуть их в . Это также позволит вам объединить и минимизировать ваши активы одновременно, а не обслуживать каждую отдельную библиотеку отдельно.

вы можете также полностью удалить FileServer конфигурация и полагаться на UseStaticFiles вместо.

в настоящее время gulp является vs Task runner выбора. Добавить gulpfile.js в корень вашего проекта, и настроить его для обработки статических файлов при публикации.

например, вы можете добавить следующее на 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"]);
28  
2018-05-19 00:56:07

enter image description here

  • используя npm для управления клиентскими библиотеками является хорошим выбором (в отличие от Bower или NuGet), вы думаете в правильном направлении:)
  • разделить серверную часть (ASP.NET Core) и на стороне клиента (например, Angular 2, Ember, React) проекты в отдельные папки (в противном случае ваш ASP.NET проект может иметь множество шумовых модульных тестов для клиентского кода, папки node_modules, артефактов сборки и т. д.). Front-end разработчики работа в одной команде с вами будет Вам за это благодарна:)
  • восстановление модулей npm на уровне решения (аналогично тому, как вы восстанавливаете пакеты через NuGet-не в папку проекта), таким образом, вы можете иметь модульные и интеграционные тесты в отдельной папке (в отличие от клиентских тестов JavaScript внутри вашего ASP.NET основной проект).
  • может не надо FileServer, имеющего StaticFiles должно быть достаточно для обслуживания статических файлов (.js, изображения так далее.)
  • используйте Webpack для связывания кода на стороне клиента в один или несколько блоков (пакетов)
  • возможно, Вам не нужно глотать / хрюкать если вы используете модульный пакет, такой как Webpack
  • напишите сценарии автоматизации сборки в ES2015 + JavaScript (в отличие от Bash или PowerShell), они будут работать кросс-платформенно и будут более доступны для различных веб-разработчиков (в настоящее время все говорят на JavaScript)
  • переименовать wwwroot до public, в противном случае структура папок в Azure Web Apps будет запутанной (D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public)
  • публикуйте только скомпилированные выходные данные в Azure Web Apps (вы никогда не должны нажимать node_modules на веб-сервере). Смотрите tools/deploy.js в качестве примера.

посещение ASP.NET сердечник стартовый комплект на GitHub (отказ от ответственности: я автор)

35  
2016-06-23 04:38:22

установить упаковщик и английское сокращение Cups В расширения Visual Studio

создать 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
  }
]

таким образом, bundler и minifier (на основе gulp) имеют доступ к исходным файлам (которые должны быть исключены из Visual Studio, а также исключены из GIT) и помещают их в wwwroot, как указано

только побочный эффект каждый раз, когда вы сохраняете его будет работать это (или вы можете установить его или запустить его вручную)

21  
2017-11-07 23:46:55

вместо того, чтобы пытаться обслуживать папку модулей узла, вы также можете использовать Gulp для копирования того, что вам нужно в wwwroot.

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

Это тоже может помочь

Visual Studio 2015 ASP.NET 5, глоток задача не копирование файлов из node_modules

7  
2017-05-23 15:10:31

каков правильный подход для этого?

есть много "правильных" подходов, вы просто должны решить, какой из них лучше всего соответствует вашим потребностям. Похоже, что вы не понимаете, как использовать node_modules...

если вы знакомы с NuGet вы должны думать о npm как его клиентский аналог. Где же на NuGet. Идея что этот каталог является общим местом для хранения пакетов, на мой взгляд лучше взять dependency на пакетах вам нужно, как вы сделали в package.json. Затем используйте бегун задачи, как Gulp например, чтобы скопировать нужные файлы в нужное вам wwwroot расположение.

я написал блоге об этом еще в январе, что детали npm,залпом и целая куча других деталей, которые до сих пор актуально и сегодня. Кроме того, кто-то обратил внимание на мой вопрос SO, который я задал, и в конечном итоге ответил сам здесь, что, вероятно, полезно.

я создал Gist это показывает gulpfile.js в качестве примера.

в своем Startup.cs по-прежнему важно использовать статические файлы:

app.UseStaticFiles();

это гарантирует, что ваше приложение может получить доступ к тому, что ему нужно.

5  
2017-05-23 15:18:14

Я даю вам два ответа. npm в сочетании с другими инструментами является мощным, но требует некоторой работы по настройке. Если вы просто хотите скачать некоторые библиотеки, вы можете использовать Менеджер Библиотек вместо этого (выпущен в Visual Studio 15.8).

NPM (Advanced)

добавить пакета.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 скачать Bootstrap, JQuery и другие библиотеки, которые используются в новом asp.net основной проект в папку с именем node_modules. Следующим шагом является копирование файлов в соответствующее место. Для этого мы будем использовать gulp, который также был загружен NPM. Затем добавьте новый файл в корень вашего проекта с именем 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 также может быть полезен для других задач, таких как minify JavaScript и CSS-файлы:

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

Менеджер Библиотек (Простой)

щелкните правой кнопкой мыши на проекте и выберите управление клиентскими библиотеками. Файл Либман.json теперь открыта. В этом файле вы указываете, какую библиотеку и файлы использовать и где они находятся должен храниться локально. Очень просто! Следующий файл копирует библиотеки по умолчанию, которые используются при создании нового файла ASP.NET основной 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"
    }
  ]
}

Если вы перемещаете файлы, убедитесь, что вы также обновить файл _Layout.cshtml.

3  
2018-08-16 08:26:01

Шон Уайлдермут имеет хороший гид здесь:https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

статья ссылается на gulpfile на GitHub, где он реализовал стратегию в статье. Вы можете просто скопировать и вставить содержимое gulpfile в ваш, но не забудьте добавить соответствующие пакеты в пакет.JSON, при разделе devDependencies: глоток глоток-уродовать глоток-конкат римраф merge-stream

1  
2018-01-06 01:29:38

Я нашел лучший способ управления пакетами JS в своем проекте с помощью npm Gulp/Grunt task runners. Мне не нравится идея иметь NPM с другим уровнем библиотеки javascript для обработки "автоматизации", и мое требование номер один-просто запустить обновление npm без каких-либо других забот, если мне нужно запустить gulp stuff, если он успешно скопировал все и наоборот.

путь НПМ:

  • минификатор JS уже входит в комплект the ASP.net ядро, ищите bundleconfig.json так что это не проблема для меня (не компиляция что-то обычное)
  • хорошая вещь о NPM - это хорошая структура файлов, поэтому я всегда могу найти предварительно скомпилированные / уменьшенные версии зависимостей под node_modules / module / dist
  • Я использую npm node_modules/.hooks / {eventname} скрипт, который обрабатывает копирование / обновление / удаление Project / wwwroot / lib / module / dist/.JS файлы, вы можете найти документация здесь https://docs.npmjs.com/misc/scripts (я обновлю скрипт, который я использую для git, как только он будет более полированным) мне не нужно дополнительные задачи бегунов (.JS инструменты, которые мне не нравятся) что держит мой проект чистым и простым.

путь python:

https://pypi.python.org/pyp... но в этом случае вам нужно поддерживать источники вручную

1  
2018-03-16 19:34:26

Comments

    Ничего не найдено.
Click here to cancel reply.