| 

.NET C# Java Javascript Exception

5
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. ...

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.

Note: There is a rating embedded within this post, please visit this post to rate it.
javascript browser nodejs
Weitere News:
Schreibe einen Kommentar:
Themen:
nodejs browser javascript
Entweder einloggen... ...oder ohne Wartezeit registrieren
Benutzername
Passwort
Passwort wiederholen
E-Mail