mbeloshitsky
@mbeloshitsky
Вебдев, систем оперейшонс, ж.д. автоматика

Как разделить фронтэнд на компоненты?

Есть у меня один проект, который реализует набор виджетов для desktop-like интерфейса: окошко с мнемосхемой в svg, таблицы, графики, панельки с наборами элементов управления. Каждый виджет состоит из одного или нескольких файлов – js-модуль с кодом и, иногда, css-стиль. В каждом файлике прописаны его зависимости в виде доморощенного решения – в начале файла, в комментарии содержится строчка вида:

/**
 * make :: widgets.itable: webix observable widgets.itable-style
 */
;(function () {
     // ... тут располагается код модуля ...
});


Как видно похоже на описание зависимостей в Makefile'ах (собственно это почти они и есть). При сборке проекта эти описания выдираются из файлов и скармливаются make'у, который конкатенирует их в нужной последовательности. Например при сборке вышеописанного фрагмента он увидит, что компонент widgets.itable зависит от компонентов webix, observable и widgets.itable-style, подгрузит эти компоненты и поместит их выше по тексту (widgets.itable-style сконкатенируется в css-файл, по конвенции все имена, оканчивающиеся на -style, конкатенируются туда).

Костылек небольшой, умещается в 2килобайтном мейкфайле, однако умеет он не все (скажем шрифты и картинки приходится встраивать в css или js), да и хочется чего-то стандартного.

Итак, вопрос – существует ли решение которое:
  1. позволит описывать и использовать зависимости между компонентами,
  2. позволит удобно публиковать и подключать компоненты с использованием какого-нибудь локального хранилища, а не через общедоступный публичный реестр,
  3. будет иметь простейшую систему сборки, которая может решать задачи вида "сконкатенировать все и углифицировать"

?

Я знаю о существовании bower, gulp, grunt, npm, ничего из этого в отдельности как будто бы не делает все, что нужно. Может стоит рассмотреть какие-нибудь связки, вроде grunt+bower?
  • Вопрос задан
  • 730 просмотров
Решения вопроса 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Вам поможет умный WebPack
Ответ написан
Комментировать
@MrCheater
Full-Stack JS. В прошлом программист-олимпиадник
либо webpack, либо gulp+browserify
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы