Давайте создадим чистый проект React Js с Typescript и Mongez Часть II: Структура проекта

Продолжим вторую часть серии статей о приложении React Mongez со структурой проекта.

Структура проекта

Открыв редактор, вы увидите следующую структуру:

Давайте рассмотрим структуру и важные файлы/каталоги.

Файлы Dot Env

Вы заметите, что есть два файла .env, .env и .env.production. Цель этого — отделить конфигурации разработки от конфигураций производства, чтобы вам не приходилось менять файл .env каждый раз, когда вы делаете новую сборку.

Пока эти два файла имеют одинаковое содержимое, но мы поговорим о .env.production в разделе production, поэтому давайте посмотрим на файл .env.

# Disable ESlint error
ESLINT_NO_DEV_ERRORS=true

# App Name
REACT_APP_NAME="blog"

# App Description
REACT_APP_DESCRIPTION=

# App Code Name
REACT_APP_CODE_NAME="b"

# Branch Name
REACT_APP_BRANCH_NAME="main"

# App default locale code
REACT_APP_DEFAULT_LOCALE_CODE=en

# App Fallback locale code
REACT_APP_FALLBACK_LOCALE_CODE=en

# App default direction
REACT_APP_DEFAULT_DIRECTION=ltr

# App Primary Color
REACT_APP_PRIMARY_COLOR=#000

# App API URL
REACT_APP_API_URL=

# App API Key
REACT_APP_API_KEY=
Вход в полноэкранный режим Выйти из полноэкранного режима

Давайте быстро просмотрим свойства файла:

Файл Package.json

В файле package.json мы рассмотрим секции, scripts и _moduleAliases.

Скрипты содержат некоторые довольно интересные команды, помимо обычных:

Вторым свойством будет _moduleAliases, которое хранит псевдонимы путей благодаря link-module-alias.

В двух словах, это позволит нам вместо того, чтобы задавать пути как родственники, сделать их абсолютными,

До:

import BaseButton from './../../design-system/components/Button';
Войти в полноэкранный режим Выйти из полноэкранного режима

После:

import BaseButton from 'design-system/components/Button';
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Обычно вы будете иметь design-system, который содержит компоненты стилизации и темы, app для базового приложения проекта, которое находится в src/apps/front-office и user для управления текущим пользователем (если приложение имеет систему управления пользователями).

Каталог src

Теперь, когда мы закончили с внешними файлами, давайте погрузимся в каталог src, который будет выглядеть следующим образом:

каталог src содержит две важные директории и один файл:

файл src/index.ts

Если мы посмотрим на файл, то он будет выглядеть примерно так:

import startApplication from "@mongez/react";
import "./shared/apps-list";
import "./shared/config";

startApplication({
  debug: true,
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Функция startApplication будет якорной функцией для запуска нашего приложения, наряду с файлом apps-list, который определяет структуру наших приложений (для ленивой загрузки) и, наконец, файл базовых конфигураций src/shared/config.ts.

Это доступные конфигурации, которые можно передать в функцию startApplication.

import { ReportHandler } from "web-vitals";

declare  type ApplicationOptions = {
    /**
     * Determine whether to enable debugging mode or not
     *
     * @default false
     */
    debug?: boolean;
    /**
     * Debug method that is passed to reportWebVitals function
     *
     * @default console.log
     */
    debugMethod?: ReportHandler;
    /**
     * Detect current used device and browser such as google chrome, ipad, tablet and so on
     *
     * @default true
     */
    detectDeviceAndBrowser?: boolean;
    /**
     * Detect Dark Mode based on user's preferences, if found then a `dark` class will be added to body
     *
     * @default true
     */
    detectDarkMode?: boolean;
    /**
     * Determine whether to use the application in strict mode
     *
     * @default true
     */
    strict?: boolean;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Помните, что функция debug работает с debugMethod, который по умолчанию установлен на web-vitals систему отчетов, вы, конечно, можете включить или отключить или даже изменить отладчик, полностью зависит от вас.

При установке strict в true, которое по умолчанию равно true, приложение будет обернуто в React.StrictMode.

Если detectDarkMode включен, то класс dark будет добавлен к html-тегу.

По умолчанию Mongez React будет пытаться определить название браузера и тип устройства, поэтому в теге html вы можете увидеть классы типа chrome desktop dark.

Каталог Shared

В основном эта папка содержит два файла и один каталог config.ts apps-list.ts и каталог assets, давайте быстро пройдемся по нему.

Мы можем импортировать из него любой файл, используя его прямой псевдоним shared/file-path-to-import, например, для импорта файла config.

import 'shared/config'; 
Вход в полноэкранный режим Выход из полноэкранного режима

Файл src/shared/config.ts

Он будет содержать основные конфигурации приложения, которые могут быть использованы с любым подприложением из src/apps приложений, как это выглядит:

import { EncryptedLocalStorageDriver } from "@mongez/cache";
import { ApplicationConfigurations, setAppConfigurations } from "@mongez/react";
import uk from "assets/images/flags/uk.png";
import AES from "crypto-js/aes";
import Root from "design-system/layouts/Root";

const appConfigurations: ApplicationConfigurations = {
  localization: {
    defaultLocaleCode: process.env.REACT_APP_DEFAULT_LOCALE_CODE,
    fallback: process.env.REACT_APP_FALLBACK_LOCALE_CODE,
    locales: {
      en: {
        direction: "ltr",
        name: "English",
        flag: uk, // optional
      },
    },
  },
  encryption: {
    key: process.env.REACT_APP_CODE_NAME,
    driver: AES,
  },
  cache: {
    // make the cache prefix with the app code name, append the branch name (if exists)
    prefix:
      process.env.REACT_APP_CODE_NAME +
      ((process.env.NODE_ENV === "development" &&
        process.env.REACT_APP_BRANCH_NAME) ||
        ""),
    driver: new EncryptedLocalStorageDriver(),
  },
  helmet: {
    appName: process.env.REACT_APP_NAME,
    appendAppName: true,
    appNameSeparator: " | ",
    translatable: true,
    translateAppName: true,
  },
  router: {
    // used for production
    basePath: process.env.REACT_APP_PRODUCTION_BASE_PATH,
    notFound: {
      mode: "redirect",
      route: "/404",
    },
    // to set a preloader between the router navigation, pass it to the `preloader` property
    // preloader: Preloader,
    // will wrap the entire application
    rootComponent: Root,
  },
  endpoint: {
    // will convert any PUT request to a POST request with a body of the form: and append _method=PUT to the body
    // whether the request body is object, FormElement or FormData
    putToPost: true,
    baseUrl: process.env.REACT_APP_API_URL,
    apiKey: process.env.REACT_APP_API_KEY,
  },
};

setAppConfigurations(appConfigurations);
Войти в полноэкранный режим Выход из полноэкранного режима

Прежде чем мы перейдем к тому, что представляют собой эти конфигурации и их использование, setAppConfigurations использует Mongez Config под капотом для управления конфигурациями между другими пакетами.

Вы также можете добавить любые конфигурации в список конфигураций, которые можно использовать с помощью config.get('your.object.key').

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

Что задает конфигурации Mongez Localization для перевода

direction важен, так как Mongez React использует его для обновления направления приложения.

encryption: Категория .

Она определяет конфигурации шифрования, мы определяем ключ шифрования для шифрования и расшифровки данных и драйвер шифрования, которым является AES от Crypto JS.

Категория cache

который также известен как Local Storage, мы предоставляем префиксный ключ для всех кэшированных элементов и драйвер кэша, который является Encryption local storage (Требуются настройки шифрования, о которых мы упоминали).

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

Кэш driver устанавливает обработчик кэша по умолчанию, который будет использоваться позже с экземпляром менеджера cache во время выполнения приложения.

Категория helmet.

Она определяет конфигурацию шлема, которая объясняется сама собой, но мы углубимся в нее, когда будем реагировать на главную страницу.

router Категория

Определяет конфигурацию маршрутизатора.

endpoint Категория

Определяет конфигурации Http.

  • Мы устанавливаем базовый url api и ключ api (если необходимо), свойство putToPost преобразует любой PUT запрос в POST и добавляет _method=PUT к полезной нагрузке запроса, причина этого свойства в том, что оно позволяет нам загружать файлы и изображения, так как PUT запросы не допускают такого запроса.

Файл src/shared/apps-list.ts

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

Mongez React Router предоставляет возможность разделить код приложения на приложения/модули.

Что это значит?

Допустим, у нас есть два приложения admin с базовым маршрутом /admin для панели администратора и front-office с базовым маршрутом / для публичного сайта.

MRR будет строить маршруты каждого модуля приложения внутри каждого приложения как отдельные файлы, поэтому файлы админки не будут загружаться, пока вы не перейдете по маршруту /admin, то же самое относится к основному маршруту фронт-офиса / и наоборот.

Это вычтет ненужное загруженное содержимое и уменьшит размер пакета до тех пор, пока вы не перейдете по этому маршруту.

Для получения более подробной информации о приложениях и модулях я предлагаю вам посетить документацию MRR, однако мы еще не раз коснемся концепции приложений/модулей.

Вернемся к нашему списку приложений, теперь мы определим, какие приложения у нас есть, наш файл apps-list.ts будет выглядеть следующим образом:

import { setApps } from "@mongez/react-router";
import frontOfficeApp from "apps/front-office/front-office-modules.json";

setApps([frontOfficeApp]);
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь не нужно много говорить, мы просто импортировали файл конфигурации модулей приложений front-office-modules.json и передали его в setApps, что позволяет маршруту знать, какие приложения и базовые пути для каждого приложения будут загружены соответствующим модулем.

Конечно, если мы захотим создать другое приложение, нам придется импортировать файл конфигурации приложения в функцию setApps.

Каталог активов

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

Каталог assets имеет псевдоним assets для быстрого импорта файлов из него.

import myLogo from 'assets/images/logo.png'; // equivalent to `src/shared/assets/logo.png`
Вход в полноэкранный режим Выход из полноэкранного режима

В нашей следующей статье мы поговорим о структуре приложений и структуре модулей.

Оставайтесь с нами…

Оцените статью
devanswers.ru
Добавить комментарий