✨Dvurechensky✨
# 🌁 Шаблон проекта ASP NET CORE MVC, Frontend - на TypeScript
## 🎇 Этапы наполнения конфигурациями 🎇
---
1. ⛅ Импорт `tsconfig.json` ⛅
---
Раскрыть код tsconfig.json
```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 из процесса компиляции.
]
}
```
---
2. ⛅ Импорт `webpack.config.js` ⛅
---
Раскрыть код webpack.config.js
```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
```js
mode: 'production', // Изменен режим на production для минимизации
optimization: {
minimize: true, // Включаем минимизацию
minimizer: [
new TerserPlugin(), // Плагин для минимизации JS
new CssMinimizerPlugin() // Плагин для минимизации CSS
]
},
```
---
3. ⛅ Импорт `package.json` - ряд плагинов опционален под ваш проект ⛅
---
Раскрыть код package.json
```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 через теги `