rearguard
Ultimate build and dev tool for create web site, SPA, mobile and desktop application powered by Cordova project. This tool support library oriented paradigm.
Last updated 2 days ago by borodindmitriy .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rearguard 
SYNC missed versions from official npm registry.

Rearguard

Что такое rearguard?

Rearguard - это среда сборки и разработки одностраничных приложений, мобильных и десктопных приложений (на базе проекта Cordova), сайтов. Инструмент поддерживает библиотека ориентированный дизайн разработки, так же участвует как инструмент в Software development methodology.

Поддерживается способ разработки известный как монорепозиторий.

Монолитный способ разработки не исключён и является частным случаем.

Примеры использования

Технологии

  • OOP
  • SOLID
  • Design patterns
  • Browser
  • HTML
  • CSS
  • React.js
  • JSS
  • CSS-Modules
  • Mobx
  • Node.js
  • MongoDB
  • Express
  • React server rendering
  • Cordova
  • Java
  • Swift

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

Настройки

Версионируемые

Все версионируемые настройки находятся в поле rearguard: {/_ поля настроек _/}, внутри package.json.

  • context: string - директория контекста, указывается относительно текущей рабочей директории.
  • entry: string - точка входа в проект, используется для сборки (проекта) и/или разработки (проекта, библиотеки). Точка входа в проект не имеет экспортов API.
  • dll_entry: string - точка входа для DLL, в результате будет собран dll_bindle и manifest.json.
  • lib_entry: string - точка выхода API библиотеки, в результате будет собран lib_bundle для подключения в браузере и скомпилированы соответсвующие директории в директорию lib для использования d.ts файлов в IDE и js файлов в среде node.js.
  • modules: string[] - список директорий внутри context, которые можно считать модулями. Позволяет писать не относительные и не абсолютные пути. Но если вы создаете библиотеку то вам необходимо использовать абсолютные пути.
  • output: { path: string; publicPath: string } - указывается директория в которую вываливать результат сборки проекта, а так же публичный путь для доступа к файлам из браузера.
  • post_css_plugins_path: string - указывает на файл с module.exports = [ /подключенные плагины для post_css/ ], отновительно текущей рабочей директории.
  • sync_project_deps: string[] - список названий модулей, которые необходимо подключить к проекту. В частности какие dll_bundle и lib_bundle необходимо подключить в браузер. Так же каждый из указанных модулей ищется в глобальном node_modules и копируется в локальный при изменении модуля по линку. Эта настройка позволяет осуществлять сборку и разработку текущего проекта или библиотеки, а так же разработку зависимого модуля.
  • has_dll: boolean - говорит о том, что в текущем проекте есть dll_bundle;
  • has_node_lib: boolean - говорит о том, что в текущем проекте компилируется версия для использования в среде node.js;
  • has_browser_lib: boolean - говорит о том, что в текущем проекте есть lib_bundle, который будет использоваться в браузерной среде;
  • is_application: boolean - говорит о том, что текущий проект можно использовать как самостоятельный. Сделать сборку из entry и залить на сервер.
  • publish_in_git: boolean - говорит о том, что проект публикуется только в git, в npm registry его публиковать не нужно.

Не версионируемые

Все не версионируемые настройки находятся в файле rearguard.json.

  • analyze: { port: 10000 (значение по умолчанию) } - декларируется порт для средства анализа бандла.
  • status: "init"(значение по умолчанию) - статус сборки проекта бывает «init», «in_progress», «done». Прослушивая эту настройку можно понять на какой стадии находится сборка проекта.
  • wds: { host: string, port: string, proxy: { [key: string]: any } } - настройки для webpack-dev-server.

Мета

Все мета файлы являются автоматически генерируемыми. Внесение изменений в эти файлы только через pull request;

  • monorepo.json - содержит { modules: string }, указывает на директорию в которой находится модули.
  • .prettierrc - содержит настройки для prettier.io.
  • tslint.json - содержит настройки для tsLint.
  • tsconfig.json - содержит настройки для typescript.
  • .npmrc - содержит настройки для npm.
  • pre_publish.sh - содержит набор действий для проверки пакета перед публикацией.
  • typings.d.ts - содержит декларацию типов для модулей с расширениями отличающиеся от ts;
  • .dockerignore - содержит информацию о том, какие директории и файлы убрать из контекста докера.
  • .editorconfig - определяет настройки табуляции для IDE.
  • .gitignore - указывает какие файлы и директории не версионируются.
  • postcss.config.js - файл в который подключаются плагины для post_css.

Установка

Пакет можно установить как локально так и глобально. Это зависит от ваших предпочтений. Установка глобально экономит место на диске, но у вас будет одна версия на все проекты, что в общем не плохо. Но и у локальной установки есть плюсы: она позволят вам использовать конкретную версию для проекта.

Глобально, для использования сразу в нескольких проектах.

npm install -g rearguard

Локально, в проект и сохранением точной версии.

npm install -D rearguard

CLI

Структуры

  • static - статические файлы (fonts, images, audio, video)
  • services - Сервисы для работы с внешними ресурсами (CRUD HTTP, REST, GraphQL, IndexedDB, WS)
  • stores - Каталог хранилищ
  • library - каталог содержащий классы, интерфейсы, утилиты, для текущего проекта.
  • typings.d.ts - Декларация для не TS модулей
  • vars - CSS переменные и JS переменные
  • vendors.ts - Информация для составления dll_bundle
  • lib_exports.ts - Точка экспорта, классов, интерфейсов, функций, констант, enums и так далее
  • index.tsx - Точка входа для запуска в браузере. Применяется для разработки и сборки результата
  • DLL - динамически подклюбчаемые зависимости, которые анализиуер webpack через manifest.json
  • Library - собранный js файл содержащий экспорт наружу определнного API, это могут быть как UI компоненты, классы, функции, константы, enums, интерфейсы
  • Master-project - проект который подключает все зависимости, именно этот проект собирается дла развертывания
  • Master-project - может быть реализовал как монолитный проект, проект подключающий библиотеки (ui-library, classes-library, dll-packe, slave-project, и прочие)
  • Slave-project - может иметь собственную реализацию UI и бизнес логику. Так же как и master-project может подключать любые библиотеки.

Monolithic project structure or master-project or slave project

monolit-project || master-project || slave-project
├── package.json
└── src - context
    ├── decorators
    ├── adapters
    ├── components
    ├── compositions
    ├── static
    ├── interfaces
    ├── pages
    ├── library
    │   ├── utils
    │   ├── interfaces
    |   |   ├── stores
    |   |   ├── repositoryes
    |   |   ├── form
    |   ├── stores
    |   ├── repositoryes
    |   ├── form
    ├── services
    ├── stores
    ├── typings.d.ts
    ├── vars
    ├── vendors.ts
    ├── lib_exports.ts
    └── index.tsx

DLL package structure

dll-package
├── package.json
└── src - context
    └── vendors.ts

Ui library structure

ui-library
├── package.json
└── src - context
    ├── decorators
    ├── adapters
    ├── components
    ├── compositions
    ├── static
    ├── interfaces
    ├── pages
    ├── stores
    |   └── browserHistory - экспортирует объект истории.
    ├── vars
    ├── typings.d.ts
    ├── vendors.ts
    ├── lib_exports.ts
    └── index.tsx

Class Library Structure

classes-library
├── package.json
└── src - context
    ├── architecture
    |   ├── implementations
    |   ├── interfaces
    ├── enums
    ├── helpers
    ├── lists
    ├── utils
    ├── vendors.ts
    └── lib_exports.ts

Master-project structure

master-project
├── package.json
└── src - context
    ├── decorators
    ├── adapters
    ├── interfaces
    ├── pages
    ├── library
    │   ├── utils
    │   ├── interfaces
    |   |   ├── stores
    |   |   ├── repositoryes
    |   |   ├── form
    |   ├── stores
    |   ├── repositoryes
    |   ├── form
    ├── services
    ├── stores
    ├── typings.d.ts
    ├── vendors.ts
    └── index.tsx

Пример работы modules

outSideProjectFromGitSubmodule - этот проект разрабатывается отдельно, например, это проект с версткой.

my-app - этот проект нуждается в компонентах, которые разрабатываются в проекте outSideProjectFromGitSubmodule.

Одним из вариантов доставки компонентов из outSideProjectFromGitSubmodule в my-app, является подключение outSideProjectFromGitSubmodule как git submodule в my-app.

my-app
├── package.json
├── public - isomorphic.publicDirName
│   └── favicon.ico
└── src - context
    ├── outSideProjectFromGitSubmodule (git submodule)
    │   ├── package.json
    │   ├── public
    │   │   └── favicon.ico
    │   └── src
    │       ├── components
    │       │   ├── Component3.jsx
    │       │   └── Component4.jsx
    │       ├── export.jsx
    │       └── index.jsx
    ├── components
    │   ├── Component1.jsx
    │   └── Component2.jsx
    └── index.jsx - entry

export.jsx

export {default as Component3} from 'components/Component3'
export {default as Component4} from 'components/Component4'

Добавим src как директорию в которой webpack будер искать модули:

{
  "modules": ["src"]
}

Теперь для получения export.jsx необходимо в файле Component2.jsx написать следующий импорт:

import { Component3 } from 'outSideProjectFromGitSubmodule/src/export'

Или получить Component4 без использования export.jsx

import Component4 from 'outSideProjectFromGitSubmodule/src/components/Component4'

Добавим ещё одну директорию src/outSideProjectFromGitSubmodule/src из (git submodule) в котором имеются интересующие нас компоненты.

{
  "modules": ["src", "src/outSideProjectFromGitSubmodule/src"]
}

Теперь для получения export.jsx необходимо в файле Component2.jsx написать следующий импорт:

import { Component3 } from 'export'

Или получить Component4 без использования export.jsx

import Component4  from 'components/Component4'

Или даже так:

{
  "modules": ["src", "src/outSideProjectFromGitSubmodule/src", "src/outSideProjectFromGitSubmodule/src/components"]
}

И получить Component4 по одному только имени

import Component4  from 'Component4'

Работа с CSS

Внешние стили

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

  • isomorphic-style-loader
  • css-loader

Модульные стили

Стили находящиеся внутри context будут обработаны через плагины PostCSS и загруженны как модули. Список загрузчиков:

  • isomorphic-style-loader
  • css-loader
  • postcss-loader

isomorphic-style-loader

Таким образом импортируются стили.

HOC withStyles - необходим для того чтобы при componentWillMount стили оказались на странице, а при componentWillUnmount они были удалены со страницы.

Файл MyComponent.css

.root {
  width: 100%;
}

Файл MyComponent.tsx

import React, { Component } from "react";
import withStyles from "isomorphic-style-loader/lib/withStyles";
import style from "./MyComponent.css";

@withStyles(style)
class MyComponent extends Component<any, any> {
  render() {
    return <div className={style.root}>Example</div>;
  }
}

export default MyComponent;

Объект style содержит:

  • Имена CSS классов
  • Метод _getCss(), который возвращает текст CSS который вставлен на страницу.
  • Метод _insertCss() - который добавляет CSS на страницу и возвращает метод удаления CSS со страницы.
  • Метод _getContent() - который возвращает объект, где ключи это имена классов, а значения это "модульные" имена классов.

Внутри withStyles используются эти методы для добавления и удаления CSS из head.

Подключение стилей из node_modules

Файл store/browserHistory

import createHistory from "history/createBrowserHistory";

export const browserHistory = createHistory();

Файл pages/App

import StyleContext from "isomorphic-style-loader/StyleContext";
import "normalize.css";
import React, { Component } from "react";
import s from "./App.css";

class App extends Component<any, never> {
  public static contextType = StyleContext;

  private removeCSS: () => void;

  constructor(props, context) {
    super(props, context);

    this.removeCSS = this.context.insertCss(s);
  }

  public componentWillUnmount() {
    this.removeCSS();
  }

  public render() {
    return React.Children.only(this.props.children);
  }
}

export default App;

Файл ./router

import React from "react";
import { LoginPage } from "./pages/administration/LoginPage/LoginPage";
import { UserAdminPage } from "./pages/administration/UserAdminPage/UserAdminPage";
import { CommonPage } from "./pages/common/CommonPage";
import { browserHistory } from "./store/browserHistory";

export function router() {
  const pathname: string = browserHistory.location.pathname;

  switch (pathname) {
    case "/login":
      return <LoginPage />;
    case "/admin":
      return <UserAdminPage />;
    case "/common":
      return <CommonPage />;
    default: {
      browserHistory.replace("/event/flightReport", null);
      return null;
    }
  }
}

Файл index.tsx

import { LocaleProvider } from "antd";
import s from "antd/dist/antd.css";
import enUS from "antd/lib/locale-provider/en_US";
import StyleContext from "isomorphic-style-loader/StyleContext";
import App from "pages/App";
import React from "react";
import ReactDOM from "react-dom";
import { browserHistory } from "store/browserHistory";

let container: Element | null;
const insertCss = (...styles: any[]) => {
  const removeCss = styles.map((style_item: any) => style_item._insertCss());

  return () => removeCss.forEach((dispose) => dispose());
};

const render = (Root) => {
  const { router } = require("./router");
  const Page = router();

  if (Page) {
    ReactDOM.render(
      <StyleContext.Provider value={{ insertCss }}>
        <LocaleProvider locale={enUS}>
          <Root>{Page}</Root>
        </LocaleProvider>
      </StyleContext.Provider>,
      container,
    );
  }
};

browserHistory.listen(() => {
  render(App);
});

document.addEventListener("DOMContentLoaded", () => {
  container = document.createElement("div");
  document.body.appendChild(container);

  style.antd._insertCss();

  render(App);
});

declare var module: any;

if (module.hot) {
  module.hot.accept("./router", () => {
    render(App);
  });
}

declare var process: { env: { NODE_ENV: string } };

if (process.env.NODE_ENV === "production") {
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker
        .register("/sw.js")
        .then((registration) => {
          console.log("SW registered: ", registration);
        })
        .catch((registrationError) => {
          console.log("SW registration failed: ", registrationError);
        });
    });
  }
}

export const style: { antd: any } = {
  antd: s,
};

Создание HTML отчета в браузере

Ниже я приведу пример того как можно использовать isomorphic-style-loader для получения css текста и создания html файла.

файл ReportTable.css

.root :global(.ant-table-body) {
  overflow: auto;
}

.row {
  padding: 0 !important;
  display: block;
  float: left;
  width: 80px;
  height: 100%;
  text-align: center;
  line-height: 54px;
  border-right: 1px solid #e8e8e8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.row:last-child {
  border-right: 0;
}

Файл ReportTable.tsx

import React, { PureComponent } from "react";
import s from "./ReportTable.css";

class ReportTable extends PureComponent<any, any> {
  private style: any;
  private removeCSS: () => void;

  constructor(props, context) {
    super(props, context);

    this.style = s;
  }

  componentWillMount() {
    this.removeCSS = this.style._insertCss();
  }

  componentWillUnmount() {
    this.removeCSS();
  }

  render() {
    return (
      <table className={s.root}>
        <tbody>
          <tr>
            <td className={s.row}>DATA_1</td>
            <td className={s.row}>DATA_2</td>
            <td className={s.row}>DATA_3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export const style: any = s;

export default ReportTable;

Файл ReportSmart.tsx

import * as root from "index"; // Файл из предидущего примера (index.tsx).
import React, { Component } from "react";
import ReactDOM from "react-dom/server";
import Control from "stubComponents/ReportControl";
import ReportTable, { style } from "./ReportTable";

class ReportSmart extends Component<any, any> {
  reportToHTML(): void {
    const body = ReactDOM.renderToStaticMarkup(<ReportTable />);
    const html = `
      <!DOCTYPE html>
        <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Report</title>
              <style type="text/css">${root.style.antd._getCss()}</style>
              <style type="text/css">${style._getCss()}</style>
          </head>
          <body>${body}</body>
        </html>
      `;
    const blob = new Blob([html], { type: "text/html" });
    const a = document.createElement("a");
    const url = URL.createObjectURL(blob);

    a.href = url;
    a.download = "report.html";

    document.body.appendChild(a);

    a.click();

    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }

  render() {
    return [<Control key={1} uploadReport={this.reportToHTML} />, <ReportTable key={2} />];
  }
}

export default ReportSmart;

И в итоге мы порлучаем HTML файл report.html который содержит HTML полученый в результате рендера компонента ReportTable и необходимый для него css текст, из внешнего пакета "antd/dist/antd.css" и модульного css самого компонента.

Вопросы и предложения можно написать в issue или непосредственно мне: Dmitriy Borodin

Current Tags

  • 4.5.11                                ...           latest (2 days ago)

143 Versions

  • 4.5.11                                ...           2 days ago
  • 4.5.10                                ...           2 days ago
  • 4.5.9                                ...           4 days ago
  • 4.5.8                                ...           4 days ago
  • 4.5.6                                ...           5 days ago
  • 4.5.5                                ...           5 days ago
  • 4.5.4                                ...           5 days ago
  • 4.5.3                                ...           20 days ago
  • 4.5.2                                ...           21 days ago
  • 4.5.1                                ...           23 days ago
  • 4.5.0                                ...           23 days ago
  • 4.4.0                                ...           24 days ago
  • 4.3.4                                ...           a month ago
  • 4.3.3                                ...           2 months ago
  • 4.3.2                                ...           2 months ago
  • 4.3.1                                ...           2 months ago
  • 4.3.0                                ...           3 months ago
  • 4.2.0                                ...           3 months ago
  • 4.1.17                                ...           3 months ago
  • 4.1.16                                ...           3 months ago
  • 4.1.15                                ...           3 months ago
  • 4.1.14                                ...           3 months ago
  • 4.1.13                                ...           3 months ago
  • 4.1.12                                ...           3 months ago
  • 4.1.11                                ...           3 months ago
  • 4.1.10                                ...           3 months ago
  • 4.1.9                                ...           3 months ago
  • 4.1.8                                ...           3 months ago
  • 4.1.7                                ...           3 months ago
  • 4.1.6                                ...           3 months ago
  • 4.1.4                                ...           3 months ago
  • 4.1.3                                ...           3 months ago
  • 4.1.2                                ...           3 months ago
  • 4.1.1                                ...           3 months ago
  • 4.0.4                                ...           4 months ago
  • 4.0.3                                ...           4 months ago
  • 4.0.2                                ...           4 months ago
  • 4.0.0                                ...           4 months ago
  • 3.1.7                                ...           5 months ago
  • 3.1.6                                ...           5 months ago
  • 3.1.4                                ...           5 months ago
  • 3.1.3                                ...           5 months ago
  • 3.1.2                                ...           5 months ago
  • 3.1.1                                ...           5 months ago
  • 3.1.0                                ...           5 months ago
  • 3.0.0                                ...           5 months ago
  • 2.5.1                                ...           5 months ago
  • 2.4.2                                ...           6 months ago
  • 2.4.1                                ...           8 months ago
  • 2.4.0                                ...           8 months ago
  • 2.3.32                                ...           9 months ago
  • 2.3.31                                ...           10 months ago
  • 2.3.30                                ...           10 months ago
  • 2.3.29                                ...           10 months ago
  • 2.3.28                                ...           a year ago
  • 2.3.27                                ...           a year ago
  • 2.3.26                                ...           a year ago
  • 2.3.25                                ...           a year ago
  • 2.3.24                                ...           a year ago
  • 2.3.23                                ...           a year ago
  • 2.3.22                                ...           a year ago
  • 2.3.20                                ...           a year ago
  • 2.3.19                                ...           a year ago
  • 2.3.18                                ...           a year ago
  • 2.3.17                                ...           a year ago
  • 2.3.16                                ...           a year ago
  • 2.3.15                                ...           a year ago
  • 2.3.14                                ...           a year ago
  • 2.3.13                                ...           a year ago
  • 2.3.12                                ...           a year ago
  • 2.3.7                                ...           a year ago
  • 2.3.6                                ...           a year ago
  • 2.3.5                                ...           a year ago
  • 2.3.3                                ...           a year ago
  • 2.3.2                                ...           a year ago
  • 2.3.1                                ...           a year ago
  • 2.3.0                                ...           a year ago
  • 2.2.13                                ...           a year ago
  • 2.2.11                                ...           a year ago
  • 2.2.10                                ...           a year ago
  • 2.2.9                                ...           a year ago
  • 2.2.7                                ...           a year ago
  • 2.2.6                                ...           a year ago
  • 2.2.5                                ...           a year ago
  • 2.2.4                                ...           a year ago
  • 2.2.3                                ...           a year ago
  • 2.2.2                                ...           a year ago
  • 2.2.1                                ...           a year ago
  • 2.1.1                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 1.8.8                                ...           a year ago
  • 1.8.7                                ...           a year ago
  • 1.8.6                                ...           a year ago
  • 1.8.4                                ...           a year ago
  • 1.8.3                                ...           a year ago
  • 1.8.2                                ...           a year ago
  • 1.8.1                                ...           a year ago
  • 1.8.0                                ...           a year ago
  • 1.7.11                                ...           a year ago
  • 1.7.9                                ...           a year ago
  • 1.7.8                                ...           a year ago
  • 1.7.7                                ...           a year ago
  • 1.7.6                                ...           a year ago
  • 1.7.4                                ...           a year ago
  • 1.7.5                                ...           a year ago
  • 1.7.3                                ...           a year ago
  • 1.7.2                                ...           a year ago
  • 1.7.1                                ...           a year ago
  • 1.7.0                                ...           a year ago
  • 1.6.28                                ...           2 years ago
  • 1.6.27                                ...           2 years ago
  • 1.6.26                                ...           2 years ago
  • 1.6.25                                ...           2 years ago
  • 1.6.24                                ...           2 years ago
  • 1.6.23                                ...           2 years ago
  • 1.6.22                                ...           2 years ago
  • 1.6.21                                ...           2 years ago
  • 1.6.20                                ...           2 years ago
  • 1.6.19                                ...           2 years ago
  • 1.6.18                                ...           2 years ago
  • 1.6.17                                ...           2 years ago
  • 1.6.16                                ...           2 years ago
  • 1.6.14                                ...           2 years ago
  • 1.6.13                                ...           2 years ago
  • 1.6.12                                ...           2 years ago
  • 1.6.11                                ...           2 years ago
  • 1.6.10                                ...           2 years ago
  • 1.6.9                                ...           2 years ago
  • 1.6.8                                ...           2 years ago
  • 1.6.7                                ...           2 years ago
  • 1.6.6                                ...           2 years ago
  • 1.6.5                                ...           2 years ago
  • 1.6.4                                ...           2 years ago
  • 1.6.3                                ...           2 years ago
  • 1.6.2                                ...           2 years ago
  • 1.6.1                                ...           2 years ago
  • 1.6.0                                ...           2 years ago
  • 1.5.5                                ...           2 years ago
  • 1.5.4                                ...           2 years ago
  • 1.5.3                                ...           2 years ago
  • 1.5.2                                ...           2 years ago
  • 1.5.1                                ...           2 years ago
  • 1.5.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 342
Last Day 0
Last Week 250
Last Month 149
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |