Пакетный менеджер NPM

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Последнее обновление: 16.12.2019

В прошлой теме было рассмотрено, как для управления пакетами клиентской стороны (то есть библиотеками javascript и css) в ASP.NET Core можно использовать менеджер Libman. Но мы также можем использовать и другой более привычный для мира фронтенд-разработки менеджер пакетов - NPM.

К примеру создадим новый проект ASP.NET Core по типу Empty. В приницпе можно выбрать в качестве типа Web Application, но в данном случае разницы никакой нет, так как он тоже по умолчанию не содержит функциональность NPM.

В первую очередь добавим в проект новый элемент npm Configuration File. Назовем его package.json:

NPM Configuration File in ASP.NET Core

После добавления откроем этот файл:

{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
	"devDependencies": {
	}
}

Изменим этот файл, добавив в него пакеты jquery и bootstrap:

{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
  "dependencies": {
    "jquery": "2.2.0",
    "bootstrap": "3.3.6"
  }
}

Определение каждого пакета содержится в виде: "название_пакета" : "версия".

Сохраним файл, и после этого в проект будут добавлены все необходимые пакеты. Во-первых, в проекте в узле Dependencies повится подузел npm, который будет содержать ссылки на добавленные пакеты.

Во-вторых, если мы нажмем на кноку Show All Files, то также в проекте мы увидим скрытый узел node_modules, который будет представлять физическую папку, в которой хранятся все файлы добавленных пакетов:

Пакетный менеджер NPM в ASP.NET Core

Теперь используем добавленные библиотеки в проекте. Для этого добавим в проект папку wwwroot и определим в ней новый файл index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="alert-success" style="margin:20px;padding:15px;height:50px; text-align:center;">Используем NPM</div>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

На странице подключаются ранее добавленные библиотеки с помощью путей, начинающихся с названи каталога node_modules. Однако по умолчанию в ASP.NET Core нам доступна только директория wwwroot, и собственно все файлы js и css лучше размещать в wwwroot. И пока добавленные файлы css и js для страницы index.html не существуют. Поэтому изменим класс Startup:

using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.FileProviders;

namespace NpmEmptyApp
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseDeveloperExceptionPage();

            // подключаем файлы по умолчанию
            app.UseDefaultFiles();
            // подключаем статические файлы
            app.UseStaticFiles();
            // добавляем поддержку каталога node_modules
            app.UseFileServer(new FileServerOptions()
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(env.ContentRootPath, "node_modules")
                ),
                RequestPath = "/node_modules",
                EnableDirectoryBrowsing = false
            });
        }
    }
}

Последний вызов app.UseFileServer() позволит сопоставлять все запросы с "/node_modules" с каталогом "node_modules".

В реальности, конечно, в большинстве случаев для библиотек из node_modules используют минификацию/бандлинг с помощью Grunt/Gulp, либо с помощью BundleConfig из первой тему этой главы с последующим копированием в папку wwwroot, поэтому не придется прибегать к проекции запросов на каталог node_modules. Но тем не менее так мы тоже можем обращаться к файлам в каталоге node_modules.

И теперь при обращении к приложению мы увидим нашу страницу index.html, к которой будут применяться стили bootstrap:

Подключение к node_modules в ASP.NET Core

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850