Debuggen von typescript mit source maps und webpack

Habe ich Projekt geschrieben in Typoskript und ich möchte in der Lage sein, um zu Debuggen (entweder in Chrome Dev Tools oder in Intellij).

Zuerst sah ich, dass Typoskript ist import Funktionalität nicht unterstützt wurde. Also versuchte ich mit Webpack zusammen mit webpack dev server aber diese sind völlig gescheitert. Obwohl mein Antrag wurde, zu arbeiten (aufgrund der mit einem einzigen bundle.js Datei, die alle den code) es würde nicht passen den code mit den angegebenen Quell-Karten und macht das Debuggen unmöglich.

Nachdem ich aufgehört webpack habe ich versucht, indem require.js als Abhängigkeit zu lösen, die require is not defined Fehler, die ich immer war. Das klappte auch, aber jetzt bin ich wieder stecken und immer diese:

Uncaught ReferenceError: Exporte ist nicht definiert

Ich habe keine Ahnung, warum das nicht funktioniert. Ich möchte meine Anwendung zu arbeiten (entweder durch webpack oder in der Lage zu beheben import-Anweisungen nach transpilation) und noch in der Lage sein, den code zu Debuggen mit dem Typoskript-produziert-source-Karten. Wie kann ich das erreichen?

Bin ich anbringen meine config-Dateien, falls etwas fehlt, gibt es:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
        ],
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
            {test: /\.css$/, loader: "style!css"}
        ]
    },
    watch: true
};

InformationsquelleAutor Konstantine | 2017-03-19

12

Um das debugging zu aktivieren mit webpack, fügen Sie devtool: "source-map" zu Ihrem webpack.config.js.

Laden von Dateien mit require.js ändern "module": "amd" im tsconfig.json. require.js unterstützt nicht das laden commonjs Module.

Vielen Dank! In beide Richtungen funktionierte. Ich Debuggen können sowohl über chrome über webpack-dev-server UND durch IntelliJ mit richtig zugeordnet und transpiled Typoskript

InformationsquelleAutor Saravana
17

Werde ich post hier eine Antwort. Diese Antwort kann nicht Arbeit für Sie (Siehe Schritt 5). Es variiert stark von person zu person. Nach so vielen Tagen verbracht in der Forschung, robin-a-meade ' s post von GitHub war die eine, die es genagelt.

Bevor Sie beginnen, das Hauptproblem zu liegen scheint, im source-mapping-URL in der VS-Code-Debugging-Konfiguration-Datei, und wie es (VS-Code) sieht in der Anwendung. Dies ist unabhängig von einer back-end-stack, die Sie verwenden (E. g Express .NET Core, Django, etc.). Das einzige, was Sie brauchen, um bewusst sein, dass Google Chrome lädt erfolgreich den generierten Quelltext anzeigen, wenn Ihre Anwendung läuft.

Verwendet:
- Visual Studio-Code-ver 1.13.1
- NodeJS 7.4.0
- Windows 10 64-bit
- Webpack 2.5 (gilt für Webpack 3)
- Typoskript 2.3
Installieren Sie die Google Chrome-Erweiterung:

1) Klicken Sie auf das Quadrat-Symbol auf der linken Seite.

2,3) geben Sie "Debugger für Chrome", ohne Komma, und klicken Sie auf installieren.

Konfigurieren Sie den debugger:

4) Klicken Sie auf das Fehler-Symbol.

5) Klicken Sie auf das ZAHNRAD-Symbol. Dies wird öffnen "starten.json", die für die Konfiguration der debugging im Visual Studio-Code.

Nun. Und hier wird es wirklich knifflig. Dies ist der Teil, der es kann oder kann nicht für Sie arbeiten.

Wieder, Dank geht an robin-ein-meade von GitHub, deren code es zu arbeiten:

6) Geben Sie die folgenden. Dieser startet eine Google Chrome-Instanz mit http://localhost in der URL. Dann wird der webpack:// Weg, um die Suche für die Webpack-Zuordnungen. Das ist wirklich schwierig und du musst versuchen mit verschiedenen Kombinationen zu sehen, die man arbeitet.
```
 {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
```
Falls Sie Firefox verwenden, versuchen Sie es mit diesen:
```
{
            "name": "Launch Firefox",
            "type": "firefox",
            "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe",
            "request": "launch",
            "reAttach": true,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": "server",

            "pathMappings": [
                {
                    "url":  "webpack:///",
                    "path": "${webRoot}/"
                }
            ],
            "url": "localhost"
        }
```
Webpack Konfiguration
Hinzufügen:

devtool : "source-Karte"

Ihrem webpack-Konfiguration. Das sollte gehen unter die Module.Objekt exportieren.

Ausführen/Erstellen Sie das Projekt mit Webpack; diese generieren soll die Quelle-Karte (Überprüfen Sie, ob der Quell-Karte generiert wird, sonst wird nichts funktionieren!):

Dann sollten Sie bereit sein zu gehen:
Drücken Sie die "Play-Taste" in das Debuggen und es sollte funktionieren!

Denken Sie daran, jede Datei, die nicht importiert zu deinem main .js Datei (wo haben Sie alle Ihre Einfuhren und erfordert), nicht in der Lage zu haben, einen Haltepunkt setzen.

Wenn das nicht funktioniert, überprüfen Sie diese Liste mit URLs, die Ihnen weiterhelfen können.
Zur Erzeugung soruce maps:
Wie erstelle ich sourcemaps bei der Verwendung von babel und webpack?

Würden Sie als neu markieren diese als die akzeptierte Antwort? Es ist so viel mehr als die aktuelle.
Zudem erwähnenswert ist hier-Nachdem Sie die bundled.js Quelle anzeigen, Debuggen Sie es in die browser-dev-Konsole, so dass Sie wissen, die Karten richtig arbeiten.

InformationsquelleAutor Jose A

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.