Moderne Webentwicklung mit ECMAScript 6 und SCSS

Einleitung

Wer kennt es nicht? Generell wird empfohlen, möglichst moderne Technologie zu verwenden. Allerdings funktioniert dies oft nicht, wie man sich das vorstellt: Unerfüllte Abhängigkeiten und Inkompatibilitäten machen einem oft einen Strich durch die Rechnung. Insbesondere bei der Webentwicklung muss man auf die neuesten Technologien verzichten, da einige Browser diese noch nicht unterstützen. Wie wir diese trotzdem verwenden können zeigen wir in diesem Artikel.

ECMAScript

ECMAScript ist der Standard für die Programmiersprache JavaScript, welche heutzutage von fast jeder Webseite verwendet wird. Die aktuelle Version ist ECMAScript 8. (Stand Februar 2022). Es wird allerdings empfohlen, die Version 5 zu benutzen, da heutzutage viele Menschen leicht veraltete Browser benutzen, die ab der Version 6 Kompatibilitätsprobleme bekommen. Das resultiert dann in einem JavaScript-Error, wodurch die Webseite nicht angezeigt wird. Wir müssen also dem Browser die ECMAScript-Version 5 präsentieren. Allerdings hat die Version 6 viele Vorteile hinsichtlich der Webentwicklung, wie z.B. erhebliche Zeitersparnis. Um diese Diskrepanz aufzulösen, benutzen wir die Technologien NodeJS und Webpack.

SCSS

SCSS ist ein sogenannter CSS-Präprozessor. Dieser erweitert die Designsprache CSS um einige praktische Funktionalitäten, wie bspw. das Schachteln von CSS-Regeln. Dadurch entsteht statt der bisherigen linearen Auflistung der CSS-Regeln eine Art Baumstruktur. Auch können Variablen verwendet werden, wodurch man die Konfiguration des Designs zentralisieren kann. Da Browser SCSS nicht von sich aus verstehen, muss das Backend der Webanwendung das SCSS zu CSS kompilieren, bevor es an den Browser geschickt werden kann. Für diese Kompilierung können wir auch an dieser Stelle NodeJS mit Webpack verwenden.

Die Installation

Um ECMAScript 6 Code und SCSS für den Browser zu kompilieren, müssen wir in unserem Projekt NodeJS installieren. Dies ist ein Backend-System, welches mit der Programmiersprache JavaScript arbeitet. Der Installer steht auf der offiziellen Webseite zum Download bereit: https://nodejs.org/en/

Ist die Installation geschafft, initialisieren wir NodeJS in unserem Projekt mit folgendem Konsolenbefehl:

npm init

Als nächstes installieren wir die benötigten NodeJS-Module:

npm install --save-dev webpack webpack-cli file-loader node-sass sass-loader

Dann legen wir eine JavaScript-Datei unter dem Pfad „src/js/main.js” an. Diese nutzt die Syntax von ECMAScript 6:

(() => { 
  alert('Hello world!'); 
})();

Zudem erstellen wir eine SCSS-Datei unter dem Pfad „src/css/main.scss“:

html { 
  body { 
    background-color: pink; 
  } 
}

Als nächstes legen wir im Hauptverzeichnis die Konfigurationsdatei „webpack.config.js“ an:

module.exports = { 
    module: { 
        rules: [ 
            { 
                test: /\.scss$/, 
                exclude: /node_modules/, 
                use: [ 
                    { 
                        loader: 'file-loader', 
                        options: { 
                           outputPath: 'css/', 
                           name: '[name].min.css' 
                        } 
                    }, 'sass-loader' 
                ] 
            }, { 
                test: /\.js$/, use: [], 
                exclude: /node_modules/, 
            } 
        ] 
    }, 
    entry: [ 
        __dirname + '/src/css/main.scss', 
        __dirname + '/src/js/main.js' 
    ], 
    output: { 
        path: require('path').resolve(__dirname, 'dist'),  
        filename: 'js/main.min.js', 
    } 
};

Anschließend erstellen wir den Ordner „dist“ in unserem Hauptverzeichnis. Dann sind wir bereit, die SCSS- und ES6-Dateien mit folgendem Befehl zu kompilieren:

node node_modules/webpack/bin/webpack.js --config webpack.config.js --mode='production'

Die fertigen CSS- und JS-Dateien sind nun einsatzbereit im „dist“-Ordner zu finden und können problemlos von einer HTML-Datei eingebunden werden. Auf diese Art und Weise verwenden wir moderne Technologien, erfüllen allerdings gleichzeitig die Kompatibilitätsanforderungen der derzeitig genutzten Browser.