Aufbau eines atomaren Design-Entwicklungs-Ökosystems in Javascript

Question

In letzter Zeit haben wir uns über die http://patternlab.io/ -Anwendung für die Entwicklung verschiedener Arten von UI-Komponenten fasziniert. Es scheint eine wirklich nette und zugängliche Möglichkeit zu sein, neue Produkte zu entwickeln und die Wiederverwendung der UI-Komponenten zu erhöhen.

Allerdings stecken wir jetzt fest in der Hölle und haben keine wirklich guten Ideen, wie wir es lösen können.

Problem:

my-awesome-project@0.0.1 
├─┬ atoms 
│ │ └── atom1 
│ │ └── atom2 
│ ├── molecules 
│ │ └── molecule1 (depends on atom1 && atom2) 
│ │ └── molecule2 
│ ├── organisms 
│ │ └── organism1 (depends of molecule1 & molecule2) 
│ │ └── organism2 

Wir verwenden browserify für unsere Pakete in CSS & ES5 transpiling. Wenn ich ein atom1 aktualisiere, muss ich molecule1 und organism1 neu kompilieren und es wird mühsam. Gibt es gute Praktiken, um ein überschaubares JavaScript-Ökosystem aufzubauen?

Struktur des Ökosystems:

FirstAtom: package.json

{ 
    "name": "first-atom", 
    "main": "dist/js/index.min.js" 
} 

SecondAtom: package.json

{ 
    "name": "second-atom", 
    "main": "dist/js/index.min.js" 
} 

CombinationOfTwoAtoms: package.json

{ 
    "name": "combination-of-two-atoms", 
    "main": "dist/js/index.min.js" 
    "devDependencies": { 
    "first-atom": "file:../../atoms/first-atom/", 
    "second-atom": "file:../../atoms/second-atom/", 
    } 
} 

Answer 1

Sofern Sie nicht wirklich jedes Molekül, Atom und Organismus separat veröffentlichen, versionieren und verwalten möchten, müssen Sie keine package.json in jedes Feld eingeben und manuell verwalten.

Halten Sie Ihre package.json an der Wurzel des Projekts, dann Abhängigkeiten mit Importen angeben, statt devDependencies (auch, warum devDependencies sicher verwenden Sie diese auch in der Produktion wollen würde?).

// first-atom.js 
export default FirstAtom; 

// second-atom.js 
export default SecondAtom; 

// first-molecule.js 
import FirstAtom from '../atoms/first-atom'; 
import SecondAtom from '../atoms/second-atom'; 

// ... 

export default FirstMolecule; 

Sie können bis zu Ihren Organismen dieses Abhängigkeitsgraphen der ganzen Art und Weise fortzusetzen. Auf diese Weise wird jedes Mal, wenn Sie eine Version Ihrer App erstellen, alles, was Sie benötigen, in einem Durchgang kompiliert.