ES6+ in älteren Browsern

Mithril.js ist in ES5 geschrieben, ist aber vollständig kompatibel mit ES6 und neueren Versionen. Alle modernen Browser unterstützen es nativ, einschließlich der nativen Modulsyntax. (Sie unterstützen jedoch nicht die spezielle Modulauflösung von Node, sodass Sie import * as _ from "lodash-es" oder ähnliches nicht verwenden können. Es werden nur relative Pfade und URL-Pfade unterstützt.) Sie können also gerne Pfeilfunktionen für Ihre Closure-basierten Komponenten oder Klassen für Ihre Klassenkomponenten verwenden.

Wenn Sie jedoch, wie viele, noch ältere Browser wie den Internet Explorer unterstützen müssen, ist es notwendig, den Code nach ES5 zu transpilieren. Diese Seite beschreibt, wie Sie mit Babel modernen ES6+-Code in älteren Browsern ausführbar machen.

Einrichtung

Stellen Sie zunächst sicher, dass Sie Node.js installiert haben, falls dies noch nicht der Fall ist. npm ist bereits enthalten, was wir später benötigen.

Sobald Sie Node.js heruntergeladen haben, öffnen Sie ein Terminal und führen Sie folgende Befehle aus:

bash

# Ersetzen Sie dies durch den tatsächlichen Pfad zu Ihrem Projekt. Verwenden Sie Anführungszeichen, falls der Pfad Leerzeichen enthält,
# und einfache Anführungszeichen unter Linux/Mac, wenn er `$$` enthält.
cd "/path/to/your/project"

# Wenn Sie bereits eine `package.json` haben, überspringen Sie diesen Befehl.
npm init

Jetzt haben Sie zwei Möglichkeiten:

Verwenden Sie Babel Standalone, ohne Bundler
Verwenden Sie Babel und bündeln Sie mit Webpack

Verwenden von Babel Standalone

Zuerst müssen wir einige Abhängigkeiten installieren.

@babel/cli installiert die Kernlogik von Babel sowie den Befehl babel.
@babel/preset-env ermöglicht Babel zu erkennen, welche Transformationen für die Zielumgebung erforderlich sind.

bash

npm install @babel/cli @babel/preset-env --save-dev

Erstellen Sie nun eine .babelrc-Datei (oder babel.config.js) und konfigurieren Sie sie mit @babel/preset-env.

json

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

Wenn Sie sehr spezifische Anforderungen an die zu unterstützenden Browser haben, sollten Sie Browserslist konfigurieren, damit Babel (und andere Bibliotheken) wissen, welche Browserfunktionen berücksichtigt werden müssen.

Standardmäßig verwendet Browserslist, wenn Sie nichts konfigurieren, eine sinnvolle Abfrage: > 0.5%, last 2 versions, Firefox ESR, not dead. Nur wenn besondere Umstände vorliegen, beispielsweise die Notwendigkeit, IE 8 mit vielen Polyfills zu unterstützen, ist dieser Schritt relevant.

Um Ihr Projekt zu kompilieren, führen Sie diesen Befehl aus:

bash

babel src --out-dir dist

Es ist möglicherweise praktischer, ein npm-Skript zu verwenden, damit Sie sich den Befehl nicht merken und nicht jedes Mal eintippen müssen. Fügen Sie ein Feld "build" zum Objekt "scripts" in Ihrer package.json hinzu:

json

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

Dadurch ist der Befehl einfacher zu tippen und zu merken.

bash

npm run build

Verwenden von Babel mit Webpack

Die Verwendung von Webpack zum Bündeln erfordert einige zusätzliche Einrichtungsschritte. Zuerst müssen wir alle Abhängigkeiten installieren, die sowohl für Babel als auch für Webpack benötigt werden.

webpack ist der Kerncode von Webpack und webpack-cli stellt den Befehl webpack bereit.
@babel/core ist der Kerncode von Babel, eine Peer-Abhängigkeit für babel-loader.
babel-loader ermöglicht es, Webpack zu konfigurieren, wie Babel zum Transpilieren Ihrer Dateien verwendet wird.
@babel/preset-env ermöglicht Babel zu erkennen, welche Transformationen für die Zielumgebung erforderlich sind.

bash

npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

Erstellen Sie nun eine .babelrc-Datei (oder babel.config.js) und konfigurieren Sie sie mit @babel/preset-env.

json

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

Richten Sie abschließend Webpack ein, indem Sie eine Datei namens webpack.config.js erstellen.

javascript

const path = require('path');

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

Diese Konfiguration setzt voraus, dass sich die Quelldatei des Anwendungseinstiegspunkts in src/index.js befindet. Das resultierende Bundle wird in dist/app.js gespeichert.

Führen Sie folgenden Befehl aus, um den Bundler zu starten:

bash

webpack -d --watch

Es ist möglicherweise praktischer, ein npm-Skript zu verwenden, damit Sie sich den Befehl nicht merken und nicht jedes Mal eintippen müssen. Fügen Sie ein Feld "start" zum Objekt "scripts" in Ihrer package.json hinzu:

json

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

Dadurch ist der Befehl einfacher zu tippen und zu merken.

bash

npm start

Für Produktions-Builds ist es ratsam, die Skripte zu minimieren. Glücklicherweise ist dies auch ziemlich einfach: Es ist lediglich das Ausführen von Webpack mit einer anderen Option.

bash

webpack -p

Sie können dies auch zu Ihren npm-Skripten hinzufügen, damit Sie es schnell und einfach erstellen können.

json

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

Dadurch ist es einfacher, sich an die Ausführung zu erinnern.

bash

npm run build

Dies kann selbstverständlich auch in automatisierten Produktions-Build-Skripten verwendet werden. Das folgende Beispiel zeigt die Verwendung mit Heroku:

json

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}

ES6+ in älteren Browsern ​

Einrichtung ​

Verwenden von Babel Standalone ​

Verwenden von Babel mit Webpack ​

ES6+ in älteren Browsern

Einrichtung

Verwenden von Babel Standalone

Verwenden von Babel mit Webpack