Basis Setup #

Um JavaScript-Module zu kompilieren, benötigst du eine Build-Toolchain, die in der Lage ist, JavaScript-Code zu verarbeiten. Eine der am häufigsten verwendeten Build-Tools ist Webpack. Mit Webpack kannst du JavaScript-Module in ein oder mehrere Bündel (Bundles) zusammenfassen. Du kannst ebenso den Import / Export Mechanismus von JavaScript Modulen nutzen.

Hier ist ein Beispiel-Setup, das Webpack verwendet, um JavaScript-Module zu kompilieren:

1. Installiere Node.js auf deinem Computer, wenn es noch nicht installiert ist.
2. Erstelle ein neues Node.js-Projekt und initialisiere es mit npm init.
3. Installiere Webpack und seine Abhängigkeiten mit npm install webpack webpack-cli --save-dev.
4. Erstelle eine Eingabedatei für dein JavaScript-Modul, beispielsweise index.js.
5. Erstelle eine Konfigurationsdatei für Webpack, z.B. webpack.config.js. Hier ist ein Beispiel:

const path = require('path');

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

Diese Konfiguration definiert, dass index.js die Eingabedatei ist und dass das kompilierte Bundle als bundle.js in das Verzeichnis dist geschrieben wird.

6. Führe Webpack aus, um das Bundle zu erstellen: npx webpack.
7. Das kompilierte Bundle ist jetzt in dist/bundle.js verfügbar.

Webpack ausführen #

Um ein Bundle zu erstellen führe folgendes aus:

npx webpack

Um ein Bunde zu erstellen welches nicht minifiziert ist, führe folgendes aus:

npx webpack --mode development

Damit man in aktiver entwicklung nicht jedesmal den Befehlt ausführen muss, kann man einen Watcher initialisieren. Dann wird bei jeder Änderung einer Datei im Webpack Space, der Befehl ausgeführt:

npx webpack --mode development --watch

React Setup #

Für React sind einige weitere Bibliotheken nötig damit die JSX Syntax von React geparsed werden kann.

1. Installieren Sie den Babel-Loader und seine Abhängigkeiten mitnpm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
2. Erstellen Sie eine Datei namens .babelrc im Stammverzeichnis Ihres Projekts mit folgendem Inhalt:

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

Dies gibt an, welche Babel-Presets verwendet werden sollen, um JavaScript-Code und JSX-Code in ES5-JavaScript-Code umzuwandeln.

3. Konfigurieren Sie Webpack, um den Babel-Loader zu verwenden, indem Sie die module-Option in der webpack.config.js-Datei aktualisieren:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Dies gibt an, dass der Babel-Loader für alle .js-Dateien verwendet werden soll, mit Ausnahme derjenigen im node_modules-Verzeichnis.

Verwenden Sie die ProvidePlugin-Konfigurationsoption von Webpack, um sicherzustellen, dass die React-Bibliothek automatisch für alle Module verfügbar ist:

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ]
};

Nachdem Sie diese Schritte ausgeführt haben, sollte Webpack in der Lage sein, den React-Code in Ihrer index.js-Datei erfolgreich zu kompilieren.

Konfiguration für CSS Dateien #

Falls man CSS Dateien in die Komponente importieren möchte, benötigt man ein weiteres Modul in Webpack. (z.B. import 'react-big-calendar/lib/css/react-big-calendar.css')

Dafür müssen folgende 2 Bibliotheken mit NPM installiert werden:

• npm install --save-dev style-loader
• npm install --save-dev css-loader

Und folgend der Code in der webpack.config.js Datei:

module: {
  rules: [
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
  ],
}

Vollständige Webpack Config Datei #

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.ProvidePlugin({
            React: 'react'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ]
    }
};