Programmieren wie beim Spielen von LEGO™

Modularität ist ein großer Trend und ich bin nicht der Erste, der auf diesen Zug aufspringt. Heute zeige ich Ihnen, wie einfach Sie mit Vanilla-JavaScript und einigen großartigen Tools eine App mit mehreren Modulen erstellen können.

Zutaten

Zunächst einmal gehe ich davon aus, dass Sie einige Dinge vorher wissen:

  1. Objekt orientierte Programmierung
  2. Wie schreibt man JS
  3. Grundlagen von NPM

Schritte

Der Boden

Beginnen wir mit einem leeren Verzeichnis für Ihr Projekt (wir nennen es Einhorn) und initialisieren es

npm init

und erstellen Sie die Hauptdatei index.js mit einer JS-Klasse der alten Schule

function Unicorn(name) {
  this.name = name;
}
Unicorn.prototype = {
  shine: function() {
    
  }
}
var dazzle = new Unicorn("Dazzle");
dazzle.shine();

Entkopplung

Stellen Sie sich nun vor, Sie möchten die verwenden Unicorn Klasse in einem anderen Projekt oder einfach Open-Source für die Menschheit. Sie könnten ein weiteres Verzeichnis mit einem anderen Repo erstellen, aber seien Sie schlauer. Das Unicorn Die Klasse ist so mit dem Unicorn-Projekt verknüpft, dass wir der Übersichtlichkeit halber den NPM-bezogenen Paketnamen verwenden.

All das reduziert index.js bis 3 Codezeilen.

import Unicorn from "@unicorn/model";
var dazzle = new Unicorn("Dazzle");
dazzle.shine();

Als nächstes erstellen wir ein Unterverzeichnis für unser Modul.

mkdir packages/model
cd packages/model
npm init 

Welche wird eine haben index.js auch mit der Klasse darin. Da wir das einfache Browser-JS mit Import/Export-Anweisung verlassen haben, warum nicht die schöne ES6-Klassensyntax verwenden.

export default class Unicorn {
  constructor(name) {
    	this.name = name;
    }
    shine () {
    	
    }
}

An diesem Punkt ist die import -Anweisung zielt auf einen Paketnamen ab, der unter installiert werden soll node_modules Unterverzeichnis. Wir könnten einen relativen Pfad wie verwenden import Unicorn from "./packages/model/index.js";. Was besser sein könnte, ist eine Verknüpfung zwischen Paketen zu erstellen.

Zum Glück kann npm das mit dem für Sie erledigen Verknüpfungsbefehl. So sieht es in unserem Fall aus.

cd packages/model
npm link
cd ..
npm link @unicorn/model

Perfekt !
Perfekt

Verpackung

Ok, schön, aber jetzt kann ich es nicht in meinem Browser verwenden, du Dummkopf!

Erstens, wie rufst du mich an?
Dann ja, ich weiß, im Moment ist es alles experimentelle Syntax und so, aber es gibt Tools, die es für Sie handhaben. Ich verwende gerne webpack mit babel, natürlich ist es nicht die einzige Lösung.

Hinzufügen eines Pakets im Stammverzeichnis des Projekts.

npm install --save-dev babel-loader babel-core babel-preset-env webpack

Die gesamte Webpack-Konfiguration könnte einen weiteren Artikel füllen, also zeige ich nur einen, der funktioniert. Legen Sie eine neue Datei mit dem Namen webpack.config.js mit einigen Anweisungen im Inneren.

module.exports = {
    entry: "./index.js", 
    module: {
        rules: [{
            test: /\.js$/, 
            use: {
                loader: "babel-loader", 
                options: {
                    presets: ["babel-preset-env"],
                },
            },
        }],
    },
    output: {
        filename: "dist/unicorn.js", 
        library: "Unicorn", 
        libraryTarget: "this",
        libraryExport: "default",
    },
};

Dann, wenn Sie laufen npx webpack Es baut alle Ihre Quellen in einer Datei auf, die von einem einfachen Webbrowser verwendet werden kann.

Verwaltung

Sie können jetzt viele Untermodule erstellen und sie alle in einer Datei zusammenfassen. Sie können sogar Sub-Sub-Module haben und so weiter. Legen Sie sie einfach alle in die packages Verzeichnis.
Wenn Ihr Projekt wächst, wird es immer schwieriger, all diese Menagerie zu verwalten.

Dass wo die Tone komm in das Spiel.

npm install -save-dev lerna

Betrachten Sie es als ein npm link auf Steroiden.
Schauen Sie sich die vollständige Dokumentation auf der Projektseite an, aber hier sind ein paar nützliche Befehle.

npx lerna clean # Remove all node_modules directories
npx lerna bootstrap # Install remote dependencies and link local ones
npx lerna add package # Install a package to all sub-modules
npx lerna add package --scope=sub-module # Install a package to a specific sub-module
npx lerna publish # Bump, tag and publish all your modules over NPM

Sie sollten jetzt auf dem richtigen Weg sein, ein möglichst elegantes Projekt zu schreiben. Ich zähle auf dich 😉

Wenn Sie ausführlichere Beispiele wünschen, baue ich gerade noch ein anderer JS-Zeichnungsbibliothek mit den gleichen Techniken.

Tschüss.

Similar Posts

Leave a Reply

Your email address will not be published.