Erfahren Sie, wie Sie mit Webpack TypeScript-Code verpacken und kompilieren

TypeScript-Bündelung

Webpack-Integration

Normalerweise müssen wir bei der eigentlichen Entwicklung Build-Tools verwenden, um den Code zu verpacken.

TS kann auch in Verbindung mit Build-Tools verwendet werden. Im Folgenden wird anhand von webpack als Beispiel die Verwendung von TS in Verbindung mit Build-Tools vorgestellt.

Hier sind die Schritte:

Initialisieren des Projekts

Geben Sie das Stammverzeichnis des Projekts ein und führen Sie den Befehl npm init -y aus, um eine Datei package.json zu erstellen

Herunterladen der Build-Tools

Der Befehl lautet wie folgt:

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

Insgesamt wurden 7 Pakete installiert:

• webpack: Tool zum Erstellen von Webpack
• webpack-cli: Befehlszeilentool für Webpack
• webpack-dev-server: Webpack-Entwicklungsserver
• Typescript: ts-Compiler
• ts-loader: ts loader, wird zum Kompilieren von ts-Dateien in webpack verwendet
• html-webpack-plugin: HTML-Plugin in Webpack, zum automatischen Erstellen von HTML-Dateien
• clean-webpack-plugin: Ein Bereinigungs-Plugin in Webpack, das das Verzeichnis vor jedem Build bereinigt.

Konfigurieren von Webpack

Erstellen Sie die Webpack-Konfigurationsdatei webpack.config.js im Stammverzeichnis:

const path = require("Pfad");
const HtmlWebpackPlugin = erfordern("html-webpack-plugin");
const { CleanWebpackPlugin } = erforderlich("clean-webpack-plugin");

modul.exporte = {
   Optimierung:
       minimieren: false // Codekomprimierung ausschalten, optional},

   Eintrag: "./src/index.ts",

   devtool: "Inline-Quellcode-Map",

   devServer: {
       Inhaltsbasis: "./dist"
   },

   Ausgabe: {
       Pfad: Pfad.resolve(__dirname, "dist"),
       Dateiname: "bundle.js",
       Umfeld:
           arrowFunction: false // Pfeilfunktion von webpack deaktivieren, optional}
   },

   lösen: {
       Erweiterungen: [".ts", ".js"]
   },

   Modul: {
       Regeln:
           {
               Test: /\.ts$/,
               verwenden: {
                   Lader: "ts-loader"     
               },
               ausschließen: /node_modules/
           }
       ]
   },

   Plugins: [
       neues CleanWebpackPlugin(),
       neues HtmlWebpackPlugin({
           Titel: „TS-Test“
       }),
   ]
}

Konfigurieren Sie die TS-Kompilierungsoptionen

Erstellen Sie tsconfig.json im Stammverzeichnis und konfigurieren Sie es entsprechend Ihren Anforderungen

{
   "Compileroptionen": {
       "Ziel": "ES2015",
       "Modul": "ES2015",
       "streng": wahr
   }
}

Ändern der package.json-Konfiguration

Ändern Sie package.json und fügen Sie die folgende Konfiguration hinzu

{
   ...
   "Skripte": {
       "test": "echo \"Fehler: kein Test angegeben\" && exit 1",
       "Build": "Webpack",
       "Start": "WebPack-Serve --öffne Chrome.exe"
   },
   ...
}

Projektnutzung

Erstellen Sie eine ts-Datei unter src und führen Sie npm run build in der Befehlszeile aus, um den Code zu kompilieren.

Oder führen Sie npm start , um den Entwicklungsserver zu starten;

Babel

Zusätzlich zu Webpack wird Babel häufig benötigt, um Code während der Entwicklung zu konvertieren.

Um die Kompatibilität mit mehr Browsern zu gewährleisten, führen Sie Babel basierend auf den oben genannten Schritten mit den folgenden Schritten in das Projekt ein:

Obwohl TS auch die Codekonvertierung während der Kompilierung unterstützt, unterstützt es nur die einfache Codekonvertierung.

Für ES6-Funktionen wie Promise kann TS nicht direkt konvertiert werden, daher wird zur Konvertierung Babel benötigt.

Installieren Sie Abhängigkeitspakete:

npm i -D @babel/core @babel/preset-env babel-loader core-js

Insgesamt wurden 4 Pakete installiert, und zwar:

• @babel/core: Babels Kernwerkzeuge
• @babel/preset-env: Babels vordefinierte Umgebung
• @babel-loader: Babel-Loader im Webpack
• core-js: core-js wird verwendet, um älteren Browsern die Unterstützung der neuen ES-Syntax zu ermöglichen

Ändern Sie die Konfigurationsdatei webpack.config.js

Modul: {
    Regeln:
        {
            Test: /\.ts$/,
            verwenden: [
                {
                    Lader: "babel-loader",
                    Optionen: {
                        Voreinstellungen: [
                            [
                                "@babel/Vorgabeumgebung",
                                {
                                    "Ziele": {
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs": "3",
                                    "useBuiltIns": "Verwendung"
                                }
                            ]
                        ]
                    }
                },
                {
                    Lader: "ts-loader",
                }
            ],
            ausschließen: /node_modules/
        }
    ]
}

Auf diese Weise werden die mit ts kompilierten Dateien erneut von Babel verarbeitet.

Machen Sie den Code in den meisten Browsern direkt nutzbar;

Sie können in den Zielkonfigurationsoptionen auch die zu kompatiblen Browserversionen angeben.

Dies ist das Ende dieses Artikels über die Verwendung von Webpack zum Verpacken und Kompilieren von TypeScript-Code. Weitere relevante Webpack-Verpackungen und Kompilieren von TypeScript-Inhalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!