Intellij Idea 使用源Map和webpack创建typescript

3phpmpom 于 2023-10-15 发布在 Webpack

关注(0)|答案(2)|浏览(123)

我在Typescript写的项目，我希望能够调试它（无论是在Chrome Dev Tools或Intellij）。
起初我看到Typescript的import功能不受支持。因此，我尝试使用Webpack沿着与webpack dev server，但这完全失败了。即使我的应用程序正在工作（由于只有一个包含所有代码的bundle.js文件），它也无法将代码与给定的源代码Map相匹配，这使得调试变得不可能。
在我停止使用webpack后，我尝试添加require.js作为依赖项来解决我得到的require is not defined错误。这是有效的，但现在我又卡住了，得到这个：
未捕获的引用错误：未定义导出
我不知道为什么这不管用。我想让我的应用程序工作（通过webpack或能够在编译后解析导入语句），并且仍然能够使用类型脚本生成的源代码Map来调试代码。我如何才能做到这一点？
我附加我的配置文件的情况下，有一些失踪：
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
};

intellij-idea

来源：https://stackoverflow.com/questions/42881493/debugging-typescript-with-source-maps-and-webpack

2条答案

按热度按时间

7kqas0il1#

我会在这里发布一个答案。这个答案可能 * 不适合你（见步骤5）。它因人而异。经过这么多天的研究，robin-a-米德在GitHub上的帖子是最好的。
在开始之前，主要的问题似乎在于VS Code配置文件内部的源Map的URL，以及它（VS Code）如何查看应用程序。这独立于您使用的任何后端堆栈（例如Express，.NET Core，Django等）。您唯一需要注意的是，Google Chrome会在您的应用程序运行时成功加载生成的源Map。
使用：

Visual Studio Code 1.13.1版
简体中文
Windows 10 64位
Webpack 2.5（也适用于Webpack 3）
TypeScript 2.3
安装Google Chrome扩展：

1)点击左边的方形图标。
2，3）键入“Chrome的插件”（不带逗号），然后单击安装。

调试器配置：

4)点击bug图标。
5)点击齿轮图标。这将打开用于在Visual Studio Code中配置调试的“launch.json”。
现在，这是真正棘手的地方。这是它可能会或可能不会为你工作的一部分。
再次感谢GitHub的robin-a-米德，他的代码使它工作：
6)输入以下内容。这将启动一个URL中包含http://localhost的Google Chrome示例。然后，它将使用webpack://路径搜索WebpackMap。这真的很棘手，你可能必须尝试不同的组合，看看哪一个工作。

{
            "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对象下。

使用Webpack运行/构建项目;这应该会生成源Map（检查源Map是否生成，否则什么都不起作用！）：

你应该准备好了：在调试中按下“播放按钮”，应该可以正常工作了！

请记住，任何 * 未导入到主.js* 文件（其中包含所有导入和要求）的文件，* 将无法设置断点。*
如果这不起作用，请查看可以帮助您的URL列表。

赞(0）回复(0）举报 2023-10-15

aiazj4mn2#

要启用webpack调试，请将devtool: "source-map"添加到webpack.config.js。
要使用require.js加载文件，请在tsconfig.json中更改"module": "amd"。require.js不支持加载commonjs模块。

赞(0）回复(0）举报 2023-10-15

我来回答

Intellij Idea 使用源Map和webpack创建typescript

2条答案

相关问题

热门标签

最新问答