How to split the frontend into components?

Question

JavaScript

I have one project that implements a set of widgets for a desktop-like interface: a window with a mnemonic in svg, tables, charts, panels with sets of controls. Each widget consists of one or more files - a js module with code and, sometimes, a css style. Each file contains its dependencies in the form of a homebrew solution - at the beginning of the file, the comment contains a line like:

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

As you can see, it looks like a description of dependencies in Makefiles (actually, this is almost what they are). When the project is built, these descriptions are torn out of the files and fed maketo 'u, which concatenates them in the desired sequence. For example, when assembling the fragment described above, it will see that the component widgets.itabledepends on the components webix, observableand widgets.itable-style, load these components and place them higher in the text ( widgets.itable-styleit will be concatenated into a css file, by convention all names ending in -style, are concatenated there).
The skeleton is small, it fits in a 2 kilobyte makefile, but it can't do everything (let's say fonts and pictures have to be embedded in css or js), and I want something standard.
So the question is, is there a solution that:

1. allows you to describe and use dependencies between components,
   
2. will allow you to conveniently publish and connect components using some local storage, and not through a publicly available public registry,
   
3. will have the simplest build system that can solve problems like "concatenate everything and uglify"
   

?
I am aware of the existence of bower, gulp, grunt, npm, none of these things in isolation seem to do all that is needed. Maybe you should consider some bundles, like grunt+bower?

Answer 1

Smart WebPack will help you