Рубрики
Без рубрики

Nestjs – добавление фронта в Monorepo

В последних двух сообщениях в блоге мы создали монорепо и интегрированный Redis. Вы можете найти их здесь: понедельник … Tagged с помощью TypeScript, JavaScript, Beginters, Vue.

В последних двух сообщениях в блоге мы создали монорепо и интегрированный Redis. Вы можете найти их здесь:

  • Монорепо и настройка микросервиса в nest.js
  • Nestjs – микросервисы с Redis

В этом сообщении мы добавим Vue в качестве нашего фронта и заставим его работать в нашем Monorepo.

Установка зависимостей

Давайте сначала установим наши зависимости:

yarn add vue

И Теперь зависимости от наших разработчиков

yarn add -D babel-loader css-loader file-loader html-webpack-plugin node-sass sass-loader url-loader vue-loader vue-template-compiler webpack webpack-bundle-analyzer webpack-cli webpack-dev-server vue-eslint-parser

Как вы можете видеть, нам нужно установить гораздо больше зависимостей для разработки. Большинство из них являются зависимостями для создания веб -пакета и обслуживания нашего фронта. WebPack будет обрабатывать HTML, VUE, CSS, SASS и файлы.

Создание фронта

Во -первых, нам нужно создать папку с именем «Frontend»

mkdir frontend

В этой папке у нас будет все наши «фронта». Для этого примера мы хотим создать наш фронт для нашего бэкэнда «блога».

cd frontend
mkdir blog

Теперь нам нужно создать index.html файл. Это будет файл входа на фронт блога.




  
    
    
    My Vue app with webpack 4

Самая важная строка здесь – div с id = "app" Анкет Vuejs нужен это div как точка входа.

Следующий файл, который нам нужен, – это webpack.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlPlugin = require('html-webpack-plugin');

const config = {
  context: __dirname,
  entry: './src/index.ts',
  output: {
    path: path.resolve(process.cwd(), 'dist/frontend'),
    filename: '[name].[contenthash].js'
  },
  target: 'web',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: { appendTsSuffixTo: [/\.vue$/] },
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.vue',
      '.tsx',
      '.ts'
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: 'index.html',
      chunksSortMode: 'dependency'
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
    new VueLoaderPlugin(),
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 9000
  }
};

module.exports = config;

Конфигурации WebPack – это весело! Давайте начнем снизу. DevServer будет работать на порту 9000 и будет искать файлы в public Анкет Для этого нам нужно установить контекст опция на __dirname . __dirname Согласится до того, что каталог в настоящее время находится, в нашем случае, папку блогов. запись это файл, который начинается, и мы создадим его дальше. В вывод Нам нужно указать путь. process.cwd () Согласится в основную папку проекта, и мы добавляем Dist/Frontend Анкет Это означает, что вы можете найти там наши фронтальные файлы. Остальное – это конфигурация, чтобы Vue работал с TypeScript, для загрузки файлов CSS, SCSS, SVG и PNG.

TypeScript также нуждается в конфигурации.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "allowJs": true
  },
  "include": [
    "./blog/src/**/*"
  ]
}

Это довольно стандартная конфигурация TS. Нам нужно включить наш блог/src папка. Без этого вы получите ошибку TypeScript.

Теперь давайте создадим наш src/index.ts Файл, src/app.vue файл и src/vue-shim.d.ts Анкет

index.ts :

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App),
});

Это настройка Vuejs по умолчанию.

App.vue

Благодаря нашей конфигурации WebPack мы уже можем использовать TypeScript в наших компонентах VUE. Этот файл – простой компонент VUE, который просто отобразит заголовок с текстом Lampeweb Dev Blog Анкет

vue-shim.d.ts :

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Это сделает TypeScript, а ваш редактор счастливым:). Вы хотите узнать больше о том, как Объявить модуль работает? Оставить комментарий!

Теперь нам нужно определить наши сценарии NPM в следующий раз.

{
  "scripts": {
    "f:blog:dev:watch": "webpack-dev-server -d --mode development --config ./frontend/blog/webpack.config.js",
    "f:blog:build": "webpack -p --mode production  --config ./frontend/blog/webpack.config.js"
  }
}

Теперь мы можем проверить, сработало ли все:

yarn run f:blog:dev:watch

После того, как WebPack создал наш фронт, вы должны увидеть следующее:

Надеюсь, вам понравился этот пост! Если вы хотите продолжение, пожалуйста, прокомментируйте и поделитесь. Так что я могу знать, что вы заинтересованы в таком контенте!

👋 Скажите привет! Instagram | Twitter | LinkedIn | Средний | Twitch | YouTube

Оригинал: “https://dev.to/lampewebdev/nestjs-adding-a-frontend-to-the-monorepo-11g6”

Читайте ещё по теме: