Browserify – Node Module im Browser

written by devangelist on Januar 27, 2014 in Browser and Javascript and NodeJs with one Comment

Node.js-Style Module gibt es nur auf dem Server. Falsch! Ein readFileSync gibt es nur auf dem Server, aber die meisten Features funktionieren sowohl auf dem Server als auch auf dem Client und wie alle wissen, funktioniert JavaScript in jedem Browser. Ach, muss es nicht schwierig sein, eine extrem flexible und einfache Sprache zu sein, die nahezu auf jeder Plattform funktioniert?

Wie die Module in den Browser kommen ist verblüffend einfach: Browserify. Dieses Modul kompiliert die vorhandenen Node.js Module zu browserfähigen Scripts, indem es die über require registrierten Module auflöst. Klar gibt es auch andere Möglichkeiten, wie RequireJs, im Browser Module zu laden, aber es gibt viele Entwickler die die Syntax von node.js-Style Modulen (module.exports) über jene der AMD (Asynchronous Module Definition) bevorzugen, da für viele der Asynchrone Part im Browser nicht so relevant ist. Außerdem bietet Browserify viele weitere Vorteile, wie die Prekompilierung von CoffeeScript oder Handlebars und die Integration in Karma oder Grunt, aber später dazu mehr.

Wie funktioniert dieses Browserify-Ding?

Um Browserify im Command-Line Tool verwenden kann, muss es global mit dem npm installiert werden:

npm install browserify -g

Dazu kann ein einfaches Node-Modul wie folgt aussehen:

// multiply.js
module.exports = function(x, y) {
    return x * y;
}

Und es kann zum Beispiel in einer Komponente über require einfach integriert werden:

// square.js
var multiply = require("./multiply");
module.exports = function(x) {
    return multiply(x, x);
}

In der eigentlichen Anwendung kann das eben erstellte Modul nun eingebunden werden:

// index.js
var square = require("./square");
console.log(square(50));
// 2.500

Browserify wird nun die einzelnen requires auflösen und eine komplette JavaScript-Datei zurück liefern. Wenn es global installiert wurde, kann mit folgendem Befehl die Datei gebündelt werden:

browserify index.js -o compiled.js

Die etwas kryptische, kompilierte Datei kann wie gewohnt im Browser als Script hinzugefügt werden und sollte durch das im Skript verwendete console.log den Wert 2500 ausgeben:

<script type="text/javascript" src="compiled.js"></script>

Natürlich können nicht nur selbstgebaute Module, sondern auch jene, die über npm installiert wurden, aufgelöst werden:

npm install underscore
var _ = require("underscore");
_.each([1, 2, 3], console.log);

Selbst Core-Module wie path, stream oder http können eingebunden werden und dabei alles nützen, was im Browser unterstützt wird. Klarerweise können dabei zum Beispiel keine Dateien von der Platte gelesen werden, allerdings können Module wie path, url oder querystring sehr wohl hilfreich sein.

Transforms

Wenn sich zwischen dem aufgelösten Modul und dem zurückgegebenen Content noch etwas befinden würde, sagen wir ein injizierter Stream, dann ist von source-transforms die Rede. Einfacher ausgedrückt, könnte das die Kompilierung von CoffeeScript zu JavaScript sein. Es werden also keine weiteren Schritte für die Prekompilierung benötigt, wie das Modul Coffeeify zeigt:

browserify -t coffeeify --extension=".coffee" foo.coffee > bundle.js

Kein vernünftiger Entwickler will nach jeder Änderung im CoffeeScript-Code den Befehl erneut ausführen, sondern direkt als kleinen Zwischenschritt im eigenen Runner, wie zum Beispiel Grunt oder Karma, einbauen. Dafür gibt es die folgenden Möglichkeiten:

Integration in Grunt

Viele Entwickler nützen mittlerweile den auf JavaScript basierten Taskrunner um ihre konfigurierten Aufgaben automatisiert auszuführen. Dass Browserify ausgesprochen gut in dieses Szenario fällt, liegt auf der Hand. Mit Grunt-Browserify kann das kompilieren der Scripts dem Taskrunner überlassen werden. Ein Beispiel für eine Konfiguration in der grunt.initConfig() könnte wie folgt aussehen:

browserify: {
    dist: {
        files: {
            'build/module.js': ['client/scripts/**/*.js']
        }
    }
}

Integration mit Karma

Auch in Kombination mit dem Karma-Testrunner kann Browserify verwendet werden. Dies macht das Testen angenehm unkompliziert, denn so können die Tests nicht nur in Node, sondern auch im Browser zusätzlich ausgeführt werden. Auch das kompilieren von CoffeeScript kann vor dem browserifyen erledigt werden:

module.exports = (config) ->
  config.set

    # frameworks to use
    frameworks: ['mocha', 'browserify']

    preprocessors:
      '**/*.coffee': ['coffee']
      'my/test/files/*': ['browserify']

Fazit

Browserify ist IMHO das zurzeit zuverlässiges Tool, Node-Module in den Browser zu bringen. Ohne großen Schnick-Schnack und mit vielen Integrationsmöglichkeiten in anderen Tools kann Browserify ein wahrer Helfer in vielen Alltagssituationen sein.

Browserify – Node Module im Browser: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,50 von 5 Punkte, 4 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.