使用源映射和 webpack 调试打字稿 [英] Debugging typescript with source maps and webpack

问题描述

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

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

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

<块引用>

未捕获的引用错误:未定义导出

我不知道为什么这不起作用.我想让我的应用程序工作(通过 webpack 或能够在转换后解析导入语句)，并且仍然能够使用打字稿生成的源映射来调试代码.我怎样才能做到这一点?

我附上我的配置文件，以防万一有什么遗漏:

tsconfig.json

<代码>{编译器选项":{"module": "commonjs",目标":es6"，源地图":真},包括": [脚本/**/*"],排除": [节点模块"]}

webpack.config.js:

module.exports = {解决: {扩展名:[/*'.ts', '.tsx', */'.js']},条目:'./scripts/main.js',输出: {小路: '/'，文件名:'app.js'},模块: {规则: [{ 测试:/\.js$/, 加载器: 'source-map-loader', 强制执行: 'pre' }],装载机: [{ test:/\.tsx?$/, loader: 'ts-loader', exclude:/node_modules/},{test:/\.css$/, 加载器: "style!css"}]},观看:真实};

解决方案

要使用 webpack 进行调试，请将 devtool: "source-map" 添加到您的 webpack.config.js代码>.

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

I have project written in Typescript and I want to be able to debug it (either in Chrome Dev Tools or in Intellij).

At first I saw that Typescript's import functionality was not supported. So I tried using Webpack along with webpack dev server but this failed completely. Even though my application was working (due to having a single bundle.js file that has all the code) it would be unable to match the code with the given source maps and this making debugging impossible.

After I stopped using webpack I tried adding require.js as a dependency to resolve the require is not defined error I was getting. That worked but now I'm stuck again and getting this:

Uncaught ReferenceError: exports is not defined

I have no idea why this isn't working. I want to be make my application work (either through webpack or being able to resolve import statements after transpilation) and still be able to debug the code using the typescript-produced source-maps. How can I achieve this?

I'm attaching my config files in case there is something missing there:

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

解决方案

To enable debugging with webpack, add devtool: "source-map" to your webpack.config.js.

To load files using require.js, change "module": "amd" in tsconfig.json. require.js does not support loading commonjs modules.

这篇关于使用源映射和 webpack 调试打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！