Archiv der Kategorie: JavaScript

Chrome unterstützt ES6 Module

Wer wie ich als Java-Entwickler in die Javascript-Welt eintaucht, vermisst eine vernünftige Gliederung in Module und die Definition von Abhängigkeiten dazwischen. In der alten Javascript-Welt wurden dafür viele Mechanismen geschaffen, deren Gebrauch für den Neuling verwirrend ist. 

Mit EcmaScript 6 (auch EcmaScript 2015) ist eine Definition von Modulen und imports bzw.  exports mit sauberen Sprachmitteln möglich. Ein Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <title>ES6 Module</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="module">
            import {getGreeting} from "./js/greeting.js";
            
            document.getElementById("content").textContent = getGreeting();
        </script>
    </head>
    <body>
        <div id="content">placeholder for content</div>
    </body>
</html>

import * as my from "./mylib.js";

export function getGreeting() {
        return my.addMy("Hello World!");
}

export function addMy(str) {
    return "My " + str;
}

Die gute Nachricht: Moderne Browser wie Chrome (ab Version 61 ohne Flags), Firefox, Safari und Edge (Edge und Firefox allerdings hinter Flags) unterstützen das bereits ohne Zusatzmittel wie Transpiler etc.:

https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

https://caniuse.com/#feat=es6-module

In EcmaScript 6 (synonym ES6 und EcmaScript 2015) sind aber noch viele andere gute Features und syntaktische Erleichterungen enthalten:

http://es6-features.org

JavaScript ist damit eine richtig erwachsene Sprache und wird damit Java immer ähnlicher 😉