✨Dvurechensky✨
- ⛅ Импорт
tsconfig.json⛅
Раскрыть код tsconfig.json
{
"compilerOptions": {
"target": "es2016", // Устанавливает уровень JavaScript, в который компилируется TypeScript (в данном случае ES2016).
"module": "es6", // Определяет, какой модульный формат используется в процессе компиляции (ES6 модули).
"moduleResolution": "node", // Способ разрешения модулей. В данном случае используется разрешение как в Node.js.
"jsx": "preserve", // Как компилировать JSX. В данном случае оставляем JSX без изменений.
"declaration": false, // Указывает, генерировать ли файлы типов (.d.ts). Здесь это отключено.
"removeComments": true, // Указывает, что комментарии должны быть удалены из скомпилированного кода.
"noImplicitAny": false, // Отключает предупреждения о неявных типах `any` в коде.
"noEmitOnError": true, // Указывает, что компиляция должна быть остановлена, если есть ошибки.
"sourceMap": true, // Генерирует карты исходных кодов для упрощения отладки.
"esModuleInterop": true, // Включает совместимость с модулями ES при импорте CommonJS модулей.
"experimentalDecorators": true, // Включает поддержку экспериментальных декораторов в TypeScript.
"emitDecoratorMetadata": true, // Включает генерацию метаданных для декораторов, которые могут использоваться в таких библиотеках как TypeORM или Angular.
"outDir": "ScriptsAndCss/JsScripts", // Указывает директорию для сохранения скомпилированных файлов.
"lib": ["es2016", "dom"] // Указывает библиотеки, которые будут включены при компиляции (ES2016 и DOM).
},
"exclude": [
"node_modules" // Исключает папку node_modules из процесса компиляции.
]
}- ⛅ Импорт
webpack.config.js⛅
Раскрыть код webpack.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin') // Импортируем TerserPlugin
module.exports = {
entry: {
app: './ScriptsAndCss/TypeScripts/main_api.ts', // Точка входа для JavaScript
styles: './ScriptsAndCss/CssFiles/styles.css', // Точка входа для CSS (может быть любой CSS-файл)
},
output: {
path: path.resolve(__dirname, 'wwwroot/js'),
filename: '[name].min.js', // Используем [name] для динамического имени файла
},
resolve: {
extensions: ['.ts', '.js', '.css'], // Добавили .css
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // Извлекает CSS в отдельные файлы
'css-loader', // Обрабатывает @import и url()
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '../css/app.min.css', // Куда Webpack должен поместить CSS-файл
}),
],
mode: 'development',
watch: true,
}В случае публикации в Production релиза нужно сменить режим
mode: 'development'наmode: 'production'в файле конфигурации
Раскрыть код изменений webpack.config.js
mode: 'production', // Изменен режим на production для минимизации
optimization: {
minimize: true, // Включаем минимизацию
minimizer: [
new TerserPlugin(), // Плагин для минимизации JS
new CssMinimizerPlugin() // Плагин для минимизации CSS
]
},- ⛅ Импорт
package.json- ряд плагинов опционален под ваш проект ⛅
Раскрыть код package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"css-minimizer-webpack-plugin": "7.0.0",
"terser-webpack-plugin": "5.3.12",
"cytoscape": "^3.31.0",
"cytoscape-cose-bilkent": "4.1.0",
"grunt": "1.4.1",
"style-loader": "^4.0.0",
"css-loader": "^7.1.2",
"mini-css-extract-plugin": "^2.9.2",
"grunt-webpack": "^7.0.0",
"webpack-cli": "^6.0.1",
"ts-loader": "^9.5.2",
"browser-sync": "^3.0.3",
"grunt-browser-sync": "^2.2.0",
"grunt-contrib-clean": "2.0.0",
"grunt-contrib-concat": "2.0.0",
"grunt-contrib-cssmin": "5.0.0",
"grunt-contrib-uglify": "5.0.1",
"grunt-contrib-watch": "1.1.0",
"grunt-ts": "6.0.0-beta.22"
},
"dependencies": {
"cytoscape": "^3.31.0"
},
"comments": {
"version": "Указывает текущую версию вашего проекта.",
"name": "Имя вашего проекта.",
"private": "Указывает, что проект является приватным и не должен быть опубликован в npm.",
"devDependencies": {
"css-minimizer-webpack-plugin": "Плагин для минимизации CSS файлов в процессе сборки Webpack.",
"terser-webpack-plugin": "Плагин для минимизации JavaScript с использованием Terser.",
"cytoscape": "Библиотека для работы с графами и сетями.",
"cytoscape-cose-bilkent": "Плагин для Cytoscape, который добавляет алгоритм планирования расположения узлов.",
"grunt": "Система автоматизации задач для Node.js, например, для сборки, минификации и тестирования.",
"style-loader": "Лоадер для инжекции CSS в DOM через теги `<style>` в процессе сборки.",
"css-loader": "Лоадер для обработки CSS файлов и поддержки импорта других CSS или стилей.",
"mini-css-extract-plugin": "Плагин для извлечения CSS в отдельные файлы, что улучшает производительность.",
"grunt-webpack": "Плагин для интеграции Webpack с системой Grunt.",
"webpack-cli": "CLI для работы с Webpack, позволяет запускать сборку через командную строку.",
"ts-loader": "Лоадер для загрузки TypeScript файлов в Webpack.",
"browser-sync": "Инструмент для синхронизации браузеров и автоперезагрузки в процессе разработки.",
"grunt-browser-sync": "Плагин для интеграции BrowserSync с Grunt.",
"grunt-contrib-clean": "Плагин для удаления файлов или папок перед выполнением задач.",
"grunt-contrib-concat": "Плагин для конкатенации (объединения) файлов в один.",
"grunt-contrib-cssmin": "Плагин для сжатия CSS файлов.",
"grunt-contrib-uglify": "Плагин для сжатия JavaScript файлов (использует UglifyJS).",
"grunt-contrib-watch": "Плагин для отслеживания изменений файлов и автоматического выполнения задач.",
"grunt-ts": "Плагин для компиляции TypeScript файлов в Grunt."
}
}
}- ⛅ Импорт
Gruntfile.js⛅
Раскрыть код Gruntfile.js
const webpackConfig = require('./webpack.config.js')
module.exports = function (grunt) {
grunt.initConfig({
webpack: {
options: webpackConfig,
build: {},
},
browserSync: {
dev: {
bsFiles: {
src: [
'wwwroot/css/*.css',
'wwwroot/js/app.min.js', // Webpack создает app.min.js
'Views/**/*.cshtml',
],
},
options: {
watchTask: true,
proxy: 'localhost:5000', // Замените на свой локальный адрес
},
},
},
watch: {
ts: {
files: ['ScriptsAndCss/TypeScripts/**/*.ts'],
tasks: ['webpack:build'], // Webpack компилирует и собирает
options: {
spawn: false,
},
},
bsReload: {
files: [
'wwwroot/css/*.css',
'wwwroot/js/app.min.js',
'Views/**/*.cshtml',
],
options: {
reload: true,
},
},
},
clean: ['wwwroot/css/*', 'wwwroot/js/*', 'ScriptsAndCss/Combined/*'],
cssmin: {
//сжатие CSS
css: {
src: ['ScriptsAndCss/CssFiles/*'], //какой файл сжимать
dest: 'wwwroot/css/app.min.css', //сжатый выходной файл
},
},
})
grunt.loadNpmTasks('grunt-webpack')
grunt.loadNpmTasks('grunt-browser-sync')
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-contrib-clean')
grunt.loadNpmTasks('grunt-contrib-cssmin')
grunt.registerTask('build', ['clean', 'webpack:build', 'cssmin'])
grunt.registerTask('default', ['build', 'browserSync:dev', 'watch'])
}- ⛅ Импорт
app_configuration.json⛅
Раскрыть код app_configuration.json
{
"appSettings": {
"appHost": "localhost:8833"
}
}- 🌋 Восстановить NPM пакеты
- 🌋 Настроить директории для генерации Frontend
- в корне проекта где мы будем его внедрять создаём такуб структуру папок
- 📁ScriptsAndCss
- 📁〰️📁CssFiles
- 📁〰️📁JsScripts
- 📁〰️📁TypeScripts
- 📁ScriptsAndCss
- в корне проекта где мы будем его внедрять создаём такуб структуру папок
- 🌋 Установить Nuget пакеты
TypeScript.MSBuildAspNetCore.Mvc.Razor.RuntimeCompilationSwashbuckle.AspNetCore.SwaggerSwashbuckle.AspNetCore.SwaggerGenSwashbuckle.AspNetCore.SwaggerUI
- 🌋 В файле
Views/Shared/_Layout.cshtmlизменить адреса доcssиjsфайлов так как теперь они называютсяapp.min.cssиapp.min.js
- 🌋 Добавить простейшую точку входа
[js]приложения в папку 📁ScriptsAndCss〰️>📁TypeScripts -main_api.ts
Раскрыть код main_api.ts
(() => {
//по загрузке окна
window.addEventListener("load", async () => {
//получаем текущий URL
const currentUrl = new URL(document.location.href);
//получаем путь из URL
const pathname = currentUrl.pathname.toLowerCase();
//разбиваем пути URL на части
const partsPath = pathname.split("/");
//смотрим путь
switch (partsPath[1]) {
case "": //страница авторизации
{
}
break;
default:
break;
}
}
})();- 🌋 Добавить простейшую точку входа
[css]приложения в папку 📁ScriptsAndCss〰️>📁CssFiles -style.css
Раскрыть код style.css
// ваши стили - скопируйте из wwwroot то что там было- 🌋 Добавить примерно такое содержимое в
Program.csПоясняю - в данном примере вырезано внесение
CSRFтокена в логику работы сервера а такжеMiddlewareотвечающий за обработку служб защиты от подделки запросов. Тут мы вносим лишь Swagger для генерации документации по API и конфигурационный файл декларирующийhostиportвашего сервера принудительно.
Раскрыть код Program.cs
using System.Reflection;
using System.Text.Json;
using Microsoft.AspNetCore.Mvc;
using Microsoft.OpenApi.Models;
var builder = WebApplication.CreateBuilder(args);
builder.Configuration.SetBasePath(Directory.GetCurrentDirectory())
.AddJsonFile($"{LoggingExtensions.AppDir}/app_configuration.json");
builder.WebHost.UseUrls($"https://{builder.Configuration["appSettings:appHost"]}");
builder.Services.AddControllersWithViews();
#region В этом регионе объявляем сервисы
// Например
// builder.Services.AddSingleton<ICashService, CashService>();
#endregion
builder.Services.Configure<JsonOptions>(options =>
{
options.JsonSerializerOptions.WriteIndented = true; //для красивого форматирования
options.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
});
builder.Services.AddSwaggerGen(options =>
{
options.SwaggerDoc("v1", new OpenApiInfo
{
Title = "App API",
Version = "1.0.0",
Description = "Информация об API",
Contact = new OpenApiContact
{
Name = "Dvurechensky"
}
});
var xmlFile = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
var xmlPath = Path.Combine(AppContext.BaseDirectory, xmlFile);
options.IncludeXmlComments(xmlPath);
});
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
else
{
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "Документация");
c.RoutePrefix = "docs";
});
app.UseDeveloperExceptionPage(); //используем страницу исключений
}
// app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();- 🌋 В диспетчере выполнения задач выполнить задачу
defaultдля генерации файлов
- 🌋 В настройках проекта в разделе
Выходные данныепоставить галочку наФайл документации-Создание файла, содержащего документацию по APIдля успешной работыSwagger
При успешном старте в данном примере мы получим сервер:
- по адресу
https://localhost:8833 - документацию Swagger
https://localhost:8833/docs/
- в свою очередь при вёрстке
Typescriptи активированной задачеdefaultвДиспетчере выполнения задач- в реальном времени будет перезагружаться страница и мы увидим новые изменения наFrontned- лицевой стороне Web-сервера после каждого сохранения файла в проекте - при установке параметров указанных для
productionверсии в файлеwebpack.config.jsмы можем собратьReleaseверсию и опубликовать её в сеть в которой все файлыcssиjsбудут сжаты и минимизированы для более быстрой и качественной работы сервера в сети - мы можем прикрутить любую существующую библиотеку NPM и использовать её в скриптах
Typescriptдля создания качественногоFrontend- состояние которого мы можем отслеживать в реальном времени при разработке. Typescript поддерживает последние возможности ECMAScript (например, async/await, декораторы, модули и т. д.), что делает код более современным и удобным. - используя ASP.NET Core MVC для серверной части (backend), позволяет создавать масштабируемые, производительные и безопасные веб-приложения
- Typescript для фронтенда (frontend) обеспечивает типизацию и улучшение читаемости кода, предотвращая множество ошибок, которые могут возникнуть при использовании обычного JavaScript.
🎃 Frontend (Typescript + Webpack):
🎈 Вы пишете код на Typescript, который потом компилируется с помощью Webpack. Webpack минифицирует и обрабатывает ваши файлы, генерирует отдельные чанки для кода, CSS и изображений. Grunt помогает автоматизировать задачи, такие как запуск Webpack, минификация CSS/JS, запуск локального сервера с BrowserSync. Backend (ASP.NET Core MVC):
🎈 Серверная часть обрабатывает бизнес-логику, запросы от клиента и взаимодействует с базой данных. Вся верстка и фронтенд код (собранный через Webpack) размещаются в папке wwwroot или другой папке для статических файлов.
🎃 Автоматизация сборки и деплоя:
🎈 Grunt автоматически обрабатывает сборку фронтенда, выполняет задачи, такие как минификация, копирование файлов и т. д. Webpack поддерживает горячую замену модулей, что ускоряет процесс разработки. Разработка с возможностью тестирования и отладки:
🎈 В процессе разработки с помощью BrowserSync можно синхронизировать несколько браузеров и автоматически перезагружать страницы. Webpack и Grunt делают разработку более продуктивной за счет автоматизации рутинных задач.
✨Dvurechensky✨