Der Modlet Workflow: Verbessern Sie Ihren Entwicklungs-Workflow mit StealJS

Avatar of Chasen Le Hara
Chasen Le Hara am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Sie wurden von den Vorteilen des Modlet-Workflows überzeugt und möchten Ihre Komponenten mit eigenen Test- und Demoseiten erstellen. Egal, ob Sie ein neues Projekt beginnen oder Ihr aktuelles aktualisieren, Sie benötigen einen Modul-Lader und -Bundler, der keine Build-Konfiguration für jede Test- und Demoseite erfordert, die Sie erstellen möchten.

StealJS ist die Antwort. Es kann JavaScript-Module in jedem Format (AMD, CJS usw.) laden und mit Plugins andere Dateitypen (Less, TypeScript usw.) laden. Es erfordert minimale Konfiguration und im Gegensatz zu webpack ist kein Build erforderlich, um Ihre Abhängigkeiten während der Entwicklung zu laden. Last but not least können Sie StealJS mit jeder JavaScript-Bibliothek oder jedem Framework verwenden, einschließlich CanJS, React, Vue usw.

In diesem Tutorial werden wir StealJS zu einem Projekt hinzufügen, eine Komponente mit Preact erstellen, eine interaktive Demoseite erstellen und eine Testseite erstellen.

Artikelserie

  1. Der Schlüssel zum Erstellen großer JavaScript-Anwendungen: Der Modlet Workflow
  2. Verbessern Sie Ihren Entwicklungs-Workflow mit StealJS (Sie sind hier!)

1. Neues Projekt erstellen

Wenn Sie bereits ein bestehendes Node.js-Projekt haben: großartig! Sie können zum nächsten Abschnitt springen, in dem wir StealJS zu Ihrem Projekt hinzufügen.

Wenn Sie noch kein Projekt haben, stellen Sie zunächst sicher, dass Sie Node.js installieren und npm aktualisieren. Öffnen Sie dann Ihre Eingabeaufforderung oder Terminalanwendung, um einen neuen Ordner zu erstellen und eine `package.json`-Datei zu initialisieren.

mkdir steal-tutorial
cd steal-tutorial
npm init -y

Sie benötigen auch einen lokalen Webserver, um statische Dateien in Ihrem Browser anzuzeigen. http-server ist eine gute Option, wenn Sie nicht bereits etwas wie Apache installiert haben.

2. StealJS zu Ihrem Projekt hinzufügen

Als Nächstes installieren wir StealJS. StealJS besteht aus zwei Hauptpaketen: steal (für Modul-Laden) und steal-tools (für Modul-Bundling). In diesem Artikel konzentrieren wir uns auf steal. Wir werden auch Preact verwenden, um eine einfache Header-Komponente zu erstellen.

npm install steal preact --save

Als Nächstes erstellen wir einen `modlet`-Ordner mit einigen Dateien.

mkdir header && cd header && touch demo.html demo.js header.js test.html test.js && cd ..

Unser `header`-Ordner hat fünf Dateien.

  • demo.html, damit wir die Komponente einfach im Browser demonstrieren können.
  • demo.js für das JavaScript der Demo.
  • header.js für das Haupt-JavaScript der Komponente.
  • test.html, damit wir die Komponente einfach im Browser testen können.
  • test.js für das JavaScript des Tests.

Unsere Komponente wird sehr einfach sein: Sie wird Preact importieren und es verwenden, um eine funktionale Komponente zu erstellen.

Aktualisieren Sie Ihre `header.js`-Datei mit Folgendem:

import { h, Component } from "preact";

export default function Header() {
  return (
    <header>
      <h1>{this.props.title}</h1>
    </header>
  );
};

Unsere Komponente akzeptiert eine title-Eigenschaft und gibt ein header-Element zurück. Im Moment können wir unsere Komponente noch nicht in Aktion sehen, also erstellen wir eine Demoseite.

3. Erstellen einer Demoseite

Der Modlet-Workflow beinhaltet das Erstellen einer Demoseite für jede Ihrer Komponenten, damit Sie Ihre Komponente einfacher sehen können, während Sie daran arbeiten, ohne Ihre gesamte Anwendung laden zu müssen. Eine dedizierte Demoseite gibt Ihnen auch die Möglichkeit, Ihre Komponente in mehreren Szenarien zu sehen, ohne diese einzeln in Ihrer App anzeigen zu müssen.

Aktualisieren wir unsere `demo.html`-Datei mit Folgendem, damit wir unsere Komponente im Browser sehen können.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Header Demo</title>
  </head>
  <body>
    <form>
      <label>
        Title
        <input autofocus id="title" type="text" value="Header component" />
      </label>
    </form>
    <div id="container"></div>
    <script src="../node_modules/steal/steal.js" main="header/demo"></script>
  </body>
</html>

Es gibt drei Hauptteile im Body unserer Demo-Datei:

  • Ein Formular mit einem Eingabefeld, damit wir den title, der an die Komponente übergeben wird, dynamisch ändern können.
  • Ein #container, in den die Komponente gerendert werden soll.
  • Ein script-Element zum Laden von StealJS und der `demo.js`-Datei.

Wir haben das Attribut main zum script-Element hinzugefügt, damit StealJS weiß, wo es mit dem Laden Ihres JavaScripts beginnen soll. In diesem Fall sucht die Demo-Datei nach `header/demo.js`, die für das Hinzufügen der Komponente zum DOM und das Abhören von Änderungen am Wert des input zuständig ist.

Aktualisieren wir `demo.js` mit Folgendem:

import { h, render } from 'preact';
import Header from './header';

// Get references to the elements in demo.html
const container = document.getElementById('container');
const titleInput = document.getElementById('title');

// Use this to render our demo component
function renderComponent() {
  render(<Header title={titleInput.value} />, container, container.lastChild);
}

// Immediately render the component
renderComponent();

// Listen for the input to change so we re-render the component
titleInput.addEventListener('input', renderComponent);

Im obigen Demo-Code erhalten wir Referenzen auf die Elemente #container und input, damit wir die Komponente anhängen und auf Änderungen des Werts des Eingabefelds reagieren können. Unsere Funktion renderComponent ist für das erneute Rendern der Komponente zuständig; wir rufen diese Funktion sofort auf, wenn das Skript ausgeführt wird, damit die Komponente auf der Seite angezeigt wird, und wir verwenden diese Funktion auch als Listener für Änderungen des Werts des Eingabefelds.

Es gibt noch eine letzte Sache, die wir tun müssen, bevor unsere Demoseite funktioniert: Wir richten Babel und Preact ein, indem wir das transform-react-jsx Babel-Plugin laden. Sie können Babel mit StealJS konfigurieren, indem Sie dies zu Ihrer `package.json` hinzufügen (aus den Preact-Dokumenten)

  ...

  "steal": {
    "babelOptions": {
      "plugins": [
        ["transform-react-jsx", {"pragma": "h"}]
      ]
    }
  },

  ...

Wenn wir nun die `demo.html`-Seite in unserem Browser laden, sehen wir unsere Komponente und ein Formular, um sie zu manipulieren.

Großartig! Mit unserer Demoseite können wir sehen, wie sich unsere Komponente bei unterschiedlichen Eingabewerten verhält. Während wir unsere App entwickeln, können wir diese Demoseite verwenden, um *nur diese Komponente* anzuzeigen und zu testen, anstatt unsere gesamte App laden zu müssen, um eine einzelne Komponente zu entwickeln.

4. Erstellen einer Testseite

Lassen Sie uns nun eine Testinfrastruktur für unsere Komponente einrichten. Unser Ziel ist es, eine HTML-Seite zu haben, die wir in unserem Browser laden können, um nur die Tests unserer Komponente auszuführen. Dies erleichtert die Entwicklung der Komponente, da Sie nicht die gesamte Testsuite ausführen oder Ihren Testcode mit .only-Anweisungen überschütten müssen, die zwangsläufig vergessen werden und während der Code-Überprüfung übersehen werden.

Wir werden QUnit als unseren Test-Runner verwenden, aber Sie können StealJS mit Jasmine, Karma usw. verwenden. Zuerst installieren wir QUnit als Entwicklungsabhängigkeit.

npm install qunitjs --save-dev

Als Nächstes erstellen wir unsere `test.html`-Datei.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Header Test</title>
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="../node_modules/steal/steal.js" main="header/test"></script>
  </body>
</html>

Im obigen HTML haben wir ein paar div-Elemente für QUnit und ein script-Element, um Steal zu laden und unsere `test.js`-Datei als Haupteinstiegspunkt festzulegen. Wenn Sie dies mit dem vergleichen, was auf der QUnit-Homepage steht, werden Sie feststellen, dass es sehr ähnlich ist, *außer* dass wir StealJS verwenden, um QUnit's CSS und JavaScript zu laden.

Als Nächstes fügen wir dies unserer `test.js`-Datei hinzu:

import { h, render } from 'preact';
import Header from './header';
import QUnit from 'qunitjs';
import 'qunitjs/qunit/qunit.css';

// Use the fixture element in the HTML as a container for the component
const fixtureElement = document.getElementById('qunit-fixture');

QUnit.test('hello test', function(assert) {
  const message = 'Welcome to your first StealJS and React app!';

  // Render the component
  const rendered = render(<Header title={message} />, fixtureElement);

  // Make sure the right text is rendered
  assert.equal(rendered.textContent.trim(), message, 'Correct title');
});

// Start the test suite
QUnit.start();

Sie werden feststellen, dass wir Steal verwenden, um QUnit's CSS zu importieren. Standardmäßig kann StealJS nur JavaScript-Dateien laden, aber Sie können Plugins verwenden, um andere Dateitypen zu laden! Um die CSS-Datei von QUnit zu laden, installieren wir das steal-css-Plugin.

npm install steal-css --save-dev

Aktualisieren Sie dann die `package.json`-Konfiguration von Steal, um das steal-css-Plugin zu verwenden.

{
  ...
  "steal": {
    "babelOptions": {
      "plugins": [
        ["transform-react-jsx", {"pragma": "h"}]
      ]
    },
    "plugins": [
      "steal-css"
    ]
  },
  ...
}

Nun können wir die test.html-Datei im Browser laden.

Erfolg! Wir haben nur die Tests für diese Komponente in unserem Browser laufen, und QUnit bietet zusätzliche Filterfunktionen zum Ausführen spezifischer Tests. Während Sie an der Komponente arbeiten, können Sie nur die Tests dieser Komponente ausführen, was Ihnen früheres Feedback darüber gibt, ob Ihre Änderungen wie erwartet funktionieren.

Zusätzliche Ressourcen

Wir haben das Modlet-Muster erfolgreich befolgt, indem wir individuelle Demo- und Testseiten für unsere Komponente erstellt haben! Wenn wir Änderungen an unserer App vornehmen, können wir unsere Komponente einfach in verschiedenen Szenarien mit der Demoseite testen und nur die Tests dieser Komponente mit der Testseite ausführen.

Mit StealJS war nur ein minimaler Konfigurationsaufwand erforderlich, um unsere Abhängigkeiten zu laden und unsere individuellen Seiten zu erstellen, und wir mussten keinen Build jedes Mal ausführen, wenn wir eine Änderung vorgenommen haben. Wenn Sie neugierig sind, was es sonst noch zu bieten hat, finden Sie auf StealJS.com Informationen zu fortgeschritteneren Themen wie Builds für die Produktion, progressivem Laden und der Verwendung von Babel. Sie können auch Fragen auf Gitter oder den StealJS-Foren stellen!

Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Tutorial durchzugehen. Lassen Sie mich wissen, was Sie in den Kommentaren unten denken!

Artikelserie

  1. Der Schlüssel zum Erstellen großer JavaScript-Anwendungen: Der Modlet Workflow
  2. Verbessern Sie Ihren Entwicklungs-Workflow mit StealJS (Sie sind hier!)
Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Dan Jones
    Permalink zum Kommentar#

    Bietet das Vorab-Kompilieren Ihres Codes, so wie es webpack tut, nicht eine bessere Leistung als wenn Steal eine Art JIT-Kompilierung durchführt?

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .