使用 source maps 和 webpack 调试 typescript

Question

我有一个用 Typescript 编写的项目，我希望能够调试它（在 Chrome Dev Tools 或 Intellij 中）。

起初我看到不支持 Typescript 的 import 功能。所以我尝试使用 Webpack 和 webpack dev server 但这完全失败了。即使我的应用程序正在运行（由于只有一个包含所有代码的 bundle.js 文件），它也无法将代码与给定的源映射匹配，这使得调试变得不可能。

在我停止使用 webpack 后，我尝试添加 require.js 作为依赖项来解决我遇到的 require is not defined 错误。那行得通，但现在我再次陷入困境并得到这个：

Uncaught ReferenceError: exports is not defined

我不知道为什么这不起作用。我想让我的应用程序工作（通过 webpack 或能够在转译后解析导入语句）并且仍然能够使用 typescript 生成的源映射来调试代码。我怎样才能做到这一点？

我附上了我的配置文件，以防万一那里缺少什么：

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
};

Answer 1

要启用 webpack 调试，请将 devtool: "source-map" 添加到您的 webpack.config.js。

要使用 require.js 加载文件，请在 tsconfig.json 中更改 "module": "amd"。 require.js 不支持加载 commonjs 个模块。

Answer 2

我要post 在这里回答。这个答案可能不适合你（见第5步）。因人而异。经过这么多天的研究，来自 GitHub 的 robin-a-meade 的 post 是成功的。

在开始之前，主要问题似乎在于 VS 代码调试配置文件内部的源映射 URL，以及它（VS 代码）如何查看应用程序。这独立于您正在使用的任何后端堆栈（例如 Express、.NET Core、Django 等）。您唯一需要注意的是，当您的应用程序为运行.

时，Google Chrome 成功加载生成的源映射

已用：

Visual Studio 代码版本 1.13.1
节点 7.4.0
Windows 10 个 64 位
Webpack 2.5（应该也适用于 Webpack 3）
打字稿 2.3

安装 Google Chrome 扩展：

1) 点击左边的方形图标。

2,3) 键入不带逗号的 "Debugger for Chrome"，然后单击安装。

配置调试器：

4) 单击错误图标。

5) 单击齿轮图标。这将打开 "launch.json" 用于在 Visual Studio 代码中配置调试。

现在。这是真正棘手的地方。这是它可能适合或不适合您的部分。

再次感谢 robin-a-meade from GitHub，他的代码使它工作：

6) 输入以下内容。这将启动一个 Google Chrome 实例，在 URL 中带有 http://localhost。然后，它将使用 webpack:// 路径搜索 Webpack 映射。这真的很棘手，您可能必须尝试不同的组合才能看到哪个有效。

 {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }

如果您使用的是 Firefox，请尝试使用这个：

{
            "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 配置 添加：

开发工具："source-map"

到你的 webpack 配置。这应该在 modules.export 对象下。

Run/Build 带有Webpack的项目；这应该生成源映射（检查源映射是否生成，否则什么都不会起作用！）：

那么你应该准备好了：在调试中按"Play button"，它应该可以工作了！

请记住，任何 未导入到您的主 .js 文件（您拥有所有导入和要求的文件）的文件,将无法设置断点

如果这不起作用，请查看此 URL 列表，它们可以帮助您。

https://github.com/angular/angular-cli/issues/2453（帮助我的奇迹页面）
Debug webpack bundled node ts with Visual Studio Code
VS Code: "Breakpoint ignored because generated code not found" error
https://github.com/Microsoft/vscode-chrome-debug
https://github.com/Microsoft/vscode/issues/25349
https://github.com/angular/angular-cli/issues/1223
https://github.com/Microsoft/vscode-chrome-debug/issues/40（页面底部）

用于生成源地图：

使用 source maps 和 webpack 调试 typescript

Debugging typescript with source maps and webpack

debugging

intellij-idea

source-maps

typescript

webpack