使用源映射和webpack调试typescript

Question

使用源映射和webpack调试typescript

Kon*_*ine 29 debugging intellij-idea source-maps typescript webpack

我有使用Typescript编写的项目,我希望能够调试它(在Chrome Dev Tools或中Intellij).

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

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

未捕获的ReferenceError:未定义导出

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

我正在附加我的配置文件,以防有些东西丢失:

tsconfig.json

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*e A 25

我要在这里发一个答案.这个答案可能并不适合你的工作(见第5步).它因人而异.经过这么多天的研究,GitHub的 robin-a-meade的帖子就是那个钉了它的人.

在开始之前,主要问题似乎在于VS代码调试配置文件内部的源映射的URL,以及它(VS代码)如何看待应用程序.这与您正在使用的任何后端堆栈无关(例如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)单击错误图标.

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

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

再次感谢来自GitHub的robin-a-meade,其代码使其工作:

6)输入以下内容.这将http://localhost在URL中启动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}/*"
            }
        }

Run Code Online (Sandbox Code Playgroud)

如果您使用的是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"
        }

Run Code Online (Sandbox Code Playgroud)

Webpack配置 添加:

devtool:"source-map"

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