node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

rearguard

Rearguard

Build Status david Greenkeeper badge

Содержание

Мотивация:

  • Версионирование конфигурации сборки;
  • Простота разворачивания конфигурации сборки определённой версии;
  • Инкрементные обновления rearguard;
  • Легкость обновления на нескольких проектах;
  • Устранение избыточности в виде копий пакетов зависимостей, которые нужны для работы сборки, в каждом проекте;
  • Возможность устанавливать rearguard глобально;
  • Единственная зависимость в package.json для разработки;
  • Быстрый старт проекта без необходимости настройки;
  • Тестирование rearguard и ключевых особенностей в целевом проекте, который был собран через rearguard;
  • Получить минимально доступную гибкость (подключение плагинов для PostCSS и Babel);
  • Минималистичный конфигурационный файл;
  • Проверка конфигурации на избыточные, недостающие или некорректные свойства.

Проверка конфигурации build.config.json

  • Содержит ли полный список полей доступных для конфигурации.
  • Не содержит ли лишних полей которые не используются.
  • Верные ли введенные типы данных.

Установка

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

npm install -D rearguard

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

npm install -g rearguard

CLI

rearguard [react | infernojs] [start | build]

Доступные флаги:

  • --typescript | -ts - включение поддержки typescript, ts, tsx файлов.
  • --isomorphic | -i - перевод сборки в изоморфный режим.
  • --onlyServer - работа только с серверной частью изоморфного приложения (фактически, получается классический веб сервер, где шаблонизатор это React или Infernojs).
  • --release | -r - работа сборки в production режиме, как для start, так и для build.
  • --analyze | -a - запуск webpack-bundle-analyzer, помогает проанализировать содержимое сборки.
  • --verbose | -v - многословный вывод.
  • --debug | -d - вывод дополнительной отладочной информации.

Использование

Запуск SPA приложения, основанного на библиотеке React

rearguard react start 

Сборка в production режиме SPA приложения, основанного на библиотеке React

rearguard react build --release 

Запуск SPA приложения, основанного на библиотеке infernojs infernojs

rearguard infernojs start 

Сборка в production режиме SPA приложения, основанного на библиотеке infernojs infernojs

rearguard infernojs build --release 

Конфигурация

При первом запуске будет автоматически сгенерировано два файла в текущей директории

  • build.config.json - версионируется
  • socket.config.json - не версионируется

build.config.json:

{
  "context": "src",
  "entry": "index.jsx",
  "output": {
    "path": "dist",
    "publicPath": "/"
  },
  "modules": [
    "src"
  ],
  "browserslist": [
    ">0.1%",
    "last 2 versions",
    "not ie <= 11"
  ],
  "proxy": {
    "/graphql": "http://localhost:9000",
    "/auth": "http://localhost:9000",
    "/ws": {
      "changeOrigin": true,
      "target": "http://localhost:5000",
      "ws": true
    }
  },
  "isomorphic": {
    "entry": "server.jsx",
    "publicDirName": "public"
  },
  "css": {
    "postCssPlugins": "postCssPlugins.js"
  },
  "typescript": {
    "configPath": "tsconfig.json",
    "showConfigForIDE": true,
    "config": {
      "compilerOptions": {},
      "compileOnSave": false
    }
  }
}

socket.config.json:

{
  "socket": {
    "port": "5000",
    "host": "localhost"
  }
}

postCssPlugins.js

module.exports = [
  require('postcss-nesting')(),
  require('postcss-nested')(),
  require('postcss-calc')(),
  require('postcss-extend')()
]
  • context - базовая директория проекта.
  • entry - точка входа в приложение указывается относительно context.
  • output.path - директория, куда будет выгружен результат сборки.
  • output.publicPath - это url, по которому можно будет получить статику.
  • modules - это директории, в которых webpack будет искать модули, пример будет ниже.
  • browserslist - список, который очерчивает круг поддерживаемых браузеров, используется для env и autoprefixer
  • proxy - объект отписывает с какого path перенаправлять на какой host и path, примеры будут ниже.
  • isomorphic.entry - точка входа в приложение веб-сервера.
  • isomorphic.publicDirName - имя директории, в которой содержатся файлы в основном используемые в <meta> тегах и поисковыми системами. Копируется в output.path. Эти файлы не импортируются в проект.
  • css.postCssPlugins - путь к файлу postCssPlugins.js, где подключаются плагины для PostCSS в целевом проекте.
  • typescript.configPath - путь к файлу tsconfig.json, где находится конфигурация для typescript, этот файл конфигурации генерируется автоматически и нужен для того, чтобы его читала IDE. Этот файл не версионируется.
  • typescript.showConfigForIDE - флаг необходимый для включения или выключения генерации tsconfig.json файла.
  • typescript.config - объект с настройками компиляции TS, значения в этом объекте будут Object.assign с базовой конфигурацией, таким образом, можно влиять на настройки TS.

Минимально необходимая структура проекта

SPA

my-app
├── package.json
├── public - isomorphic.publicDirName
│   └── favicon.ico
└── src - context
    └── index.jsx - entry

Isomorphic

my-app
├── package.json
├── public - isomorphic.publicDirName
│   └── favicon.ico
└── src - context
    └── index.jsx - entry
    └── server.jsx - isomorphic.entry

Дальнейшее развитие проекта остаётся на усмотрение разработчика.

Пример работы 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'

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

{
  "proxy": {
    "/graphql": "http://localhost:9000",
    "/auth": "http://localhost:9000",
    "/ws": {
      "changeOrigin": true,
      "target": "http://localhost:5000",
      "ws": true
    }
  }
}

Все запросы начинающиеся на /graphql будут перенаправлены на:

Все запросы начинающиеся на /auth будут перенаправлены на:

В режиме SPA используется webpack-dev-server который в свою очередь использует http-proxy-middleware для работы proxy. В режиме Isomorphic или onlyServer используется веб-сервер который находится

Что внутри ?

This is my consolidation of tools for building front-end apps base on react or infernojs,