使用源地图和网页包调试typescript

Question

我有一个用Typescript编写的项目，我希望能够调试它（无论是在Chrome开发工具中还是在Intellij中）。

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

停止使用webpack后，我尝试添加require。js作为解决需求的依赖项未定义错误。这很管用，但现在我又被困住了，我明白了：

未捕获引用错误：未定义导出

我不知道这为什么不起作用。我想让我的应用程序工作（通过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:“源代码映射”添加到webpack中。配置。js。

使用require加载文件。js，更改“模块”：tsconfig中的“amd”。json<代码>要求。js不支持加载commonjs模块。

Answer 2

我将在这里发布一个答案。这个答案可能不适用于你（参见第5步）。它因人而异。经过了这么多天的研究，robin-a-meade在GitHub上的帖子终于抓住了关键。

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

使用：

• Visual Studio代码1.13.1版

安装GoogleChrome扩展：

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

2,3）键入不带逗号的“Chrome调试器”，然后单击安装。

配置调试器：

4） 点击bug图标。

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

现在。这就是它变得非常棘手的地方。这是它可能对你有用也可能没用的部分。

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

6） 输入以下内容。这将启动一个带有http://localhost在URL中。然后，它将使用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"
        }

网页包配置添加：

devtools：“源代码地图”

记住，任何未导入到主目录的文件。js文件（包含所有导入和所需内容）将无法设置断点。

如果这不起作用，请查看以下URL列表，这些URL可以帮助您解决问题。

1. https://github.com/angular/angular-cli/issues/2453（帮助我走出困境的奇迹页面）
2. 使用Visual Studio代码调试Web包绑定的节点ts
3. VS代码：“由于未找到生成的代码而忽略断点”错误
4. https://github.com/Microsoft/vscode-chrome-debug
5. https://github.com/Microsoft/vscode/issues/25349
6. https://github.com/angular/angular-cli/issues/1223
7. https://github.com/Microsoft/vscode-chrome-debug/issues/40（页面底部）
8. https://stackoverflow.com/a/42405563/1057052

对于生成soruce地图：如何生成源地图时使用Babel和webpack？