Javascript Module

Allgemeines

Javascript kann durch die Möglichkeit Modules zu verwenden erweitert werden.

Es gibt hier verschiedene Syntax Varianten, Module Formats genannt. Man könnte auch von Spracherweiterungen sprechen.

  • AMD (Asynchronous Module Definition)
  • CommonJS
  • UMD (Universal Module Definition)

Reichert man nun seinen Javascript Code mit Module Programmierung an, so werden die Browser, die ja den Javascript Code interpretieren müssen, diese zusätzliche Syntax nicht verstehen.

Hier kommen die Module Loader ins Spiel.

  • RequireJS (kann AMD verarbeiten)
  • SystemJS (kann AMD, CommonJS, UMD und noch andere Formate verarbeiten)

Module Loader sitzen praktisch als Übersetzer zwischen der eigentlich unbekannten Module Format Syntax und der Javascript Engine des Browser.

Hinweis: nodejs hat einen builtin Module Loader, der CommonJS verarbeiten kann.

ES2015 Module Format

Dies ist ein weiteres Format, welches aber im Gegensatz zu den oben genannten Formaten bereits in Javascript eingebaut ist. D.h., im Grunde genommen verstehen die Browser diese Syntax, jedenfalls die Browser, die die ES2015 Features implementiert haben.

Siehe http://caniuse.com/#feat=es6-module

Für die Browser, die ES2015 Module nicht kennen, muss der Code in ein Format umgewandelt werden, welches über Loader wie RequireJS oder SystemJS verarbeitet werden kann.

 

Übersicht der verschiedenen Javascript Spezifikationen:

ES5

Standardisiert in 2009

ES6 (later renamed to ECMAScript 2015)

Standardisiert in 2015

ECMAScript 2016

Standardisiert in 2016

ECMAScript 2017

Standardisiert in 2017

 

Wie die einzelnen Funktionalitäten in Browsern umgesetzt sind kann hier entnommen werden:

http://kangax.github.io/compat-table/es5

Bundlers

Bei der Verwendung von „normalen“ Modules wird ja im Browser nur die Start Javascript Datei referenziert. Alle weiteren Dateien werden vom Loader dynamisch nachgeladen, wenn sie gebraucht werden.

Ein Bundler baut aus allen Javascript Dateien eine große Datei, die dann direkt im Browser referenziert wird. Es werden in der Regel keine Dateien nachgeladen.

Browserify kann beispielsweise verwendet werden, um CommonJS Modules zu bundeln.

http://browserify.org/

Webpack ist ein sehr umfangreiches Tool, mit dem unter anderem ADM, CommonJS und ES2015 Modules gebundelt werden können.

https://webpack.js.org/

Webpack kann neben Javascript auch noch Images und CSS bundeln und hat noch viele weitere Features wie Code splitting.

Typescript und Modules

Typescript übrigens verwendet die ES2015 Syntax für Modules und kann in viele Formate kompilieren: CommonJS, AMD, UMD und andere

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.