JavaScript Build-Systeme

Bundler: Finden, Verarbeiten und Bundlen von Abhängigkeiten
Transpiler (z.B. für JavaScript-Varianten, SCSS, ...)

Bundler

bundler: z.B. webpack, parcel, rollup

Transpiler

Transpiler: Beispiel bei JavaScript: babel:

modernes JavaScript
TypeScript
JSX

Bundler

Bundler dienen als Ausgangspunkt für Builds:

finden Ressourcen (oft via import deklariert)
transpilieren / verarbeiten Ressourcen (via Plugins)
bundlen Ressourcen

Bundler

Beispiele für Bundler:

webpack: weit verbreitet, viele Plugins
parcel: einfach zu verwenden
rollup: insbesondere zum Erstellen von JS-Libraries
esbuild: sehr schnell

Transpiler

transformieren Code

Beispiel: Verarbeiten von JavaScript:

modernes JavaScript
TypeScript
JSX
Minifizierung

Parcel

Einfach zu nutzender Bundler mit Unterstützung für:

modernes CSS
CSS Module
SCSS
modernes JS
TypeScript
JSON
WebAssembly
Rust

Parcel: Grundlegende Projekteinrichtung

beginnen mit package.json, welches ein leeres Objekt enthält: {}

Installation von Abhängigkeiten:

npm install parcel

Parcel: Grundlegende Projekteinrichtung

in src/index.js:

import { add } from './mymath.js';

console.log(add(1, 1));

in src/mymath.js:

export const add = (a, b) => a + b;

Parcel: Grundlegende Projekteinrichtung

Konfiguration in package.json:

{
  "source": "src/index.html",
  "scripts": {
    "build": "parcel build",
    "start": "parcel"
  }
}

Parcel: Grundlegende Projekteinrichtung

HTML Einstiegspunkt in src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>React starter app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

Parcel: Grundlegende Projekteinrichtung

Build via:

npm run build

Entwicklungsserver unter localhost:8080:

npm run start

Webpack

Bundler, der JavaScript als zentrale Sprache verwendet - basiert auf import-Statements

Webpack: grundlegende Projekteinrichtung

wir beginnen mit einer package.json-Datei, die ein leeres Objekt enthält: {}

Installation von Abhängigkeiten:

npm install webpack webpack-cli webpack-dev-server

Webpack: grundlegende Projekteinrichtung

Beispielprojekt aus 2 Dateien:

src/index.js:

import { add } from './mymath.js';

console.log(add(1, 1));

src/mymath.js:

export const add = (a, b) => a + b;

Webpack: grundlegende Projekteinrichtung

Konfiguration via webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

verwende src/index.js als Einstiegspunkt

schreibe das Resultat nach dist/, bentzte dist/bundle.js als Einstiegspunkt

Webpack: grundlegende Projekteinrichtung

npm scripts in package.json:

"scripts": {
  "build": "webpack",
  "start": "webpack serve --mode development"
}

Webpack: grundlegende Projekteinrichtung

Build via:

npm run build

Entwicklungsserver auf localhost:8080 via:

npm run start

Webpack Loader und Plugins

Beispiele:

html-webpack-plugin
babel-loader (JavaScript-Varianten)
style-loader, css-loader

HTML Plugin

Erstellt eine HTML-Seite, die auf das JavaScript-Bundle verweist (unter dist/index.html)

HTML Plugin

npm install html-webpack-plugin

in webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');

  plugins: [
    new HtmlWebpackPlugin({title: "page title"})
  ],

Babel loader

npm install babel-loader @babel/core

Aktivierung von Babel in webpack.config.js:

  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },

Bemerkung: in dieser Konfiguration ändert Babel noch nichts am Code

Babel-Konfiguration

npm-Pakete:

@babel/core
@babel/preset-env (modern JS)
@babel/preset-react (JSX)
@babel/typescript

Babel-Konfiguration

mögliche Konfiguration - z.B. in package.json:

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },