Question

我有使用Typescript编写的项目，我希望能够调试它（在a = np.array(['A','C','G','T','A','C','G','T','M']) b = np.array(['A','C','G','T']) diff = np.setdiff1d(a, b) print diff或Chrome Dev Tools中）。

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

在我停止使用webpack之后，我尝试添加bundle.js作为依赖项来解决我遇到的require.js错误。虽然有效，但现在我再次陷入困境并且得到了这个：

未捕获的ReferenceError：未定义导出

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

我附上我的配置文件以防丢失的地方：

tsconfig.json

require is not defined

webpack.config.js：

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

Answer 1

我打算在这里发一个答案。这个答案可能不为您工作（参见步骤5）。它因人而异。在研究了这么多天之后，GitHub的robin-a-meade的帖子就是钉在它上面的那个。

在开始之前，主要问题似乎在于VS代码调试配置文件内部的源映射的URL，以及它（VS代码）如何看待应用程序。这与您正在使用的任何后端堆栈无关（例如，E.g Express，.NET Core，Django等）。您唯一需要注意的是，Google Chrome会在您的应用程序运行时成功加载生成的源地图。

用于：

Visual Studio Code ver 1.13.1
NodeJS 7.4.0
Windows 10 64位
Webpack 2.5（也应该申请Webpack 3）
TypeScript 2.3

安装Google Chrome扩展程序：

1）点击左侧的方形图标。

2,3）键入“Debugger for Chrome”，不带逗号，然后点击安装。

配置调试器：

4）点击bug图标。

5）单击齿轮图标。这将打开“launch.json”，用于在Visual Studio Code中配置调试。

现在。这是它变得非常棘手的地方。这是它可能或可能不适合你的部分。

再次感谢robin-a-meade from GitHub，其代码使其成功：

6）输入以下内容。这将在网址中启动带有http://localhost的Google Chrome实例。然后，它将使用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配置 添加：

devtool：“source-map”

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