调试器断点错误行。 Webpack配置打字稿

时间：2020-06-20 12:20:24

标签： typescript webpack visual-studio-code source-maps

我终于在项目中使用了打字稿，但是断点并没有在正确的行中停下来，并且变量值只有在逐步执行更多代码行之后才可用。如果源映射中不匹配，则似乎有一些ttype。 我尝试解决此问题，将其插入here中，将SourceMapDevToolPlugin添加到webpack配置文件中。 但是并不能解决问题。

下面是我的意思的屏幕截图：

enter image description here

myString是未定义的，尽管该行已被执行。

enter image description here

它直接跳转到函数（而不是跳转到调用该函数的const myNumber = myFunc(5);之后）并且字符串的值可用时，这真是太奇怪了。

在我的webpack配置下面，launch.json和tsconfig。

webpack配置：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const SourceMapDevToolPlugin = require('');

const modulesPath = path.resolve(__dirname, 'node_modules');
const srcPath = path.resolve(__dirname, 'src');
const outputPath = path.resolve(__dirname, 'dist');

const basename = process.env.BASENAME || '/';
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';

module.exports = {
  mode,
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    historyApiFallback: true,
    port: 3000,
    stats: 'minimal',
  },
  entry: [
    path.join(srcPath, 'index.css'),
    path.join(srcPath, './trial.ts'),
  ],
  output: {
    path: outputPath,
    publicPath: basename,
  },
  resolve: {
    alias: {
      '@': srcPath,
    },
    extensions: ['.tsx', '.ts', '.js', '.js', '.json'],
  },
  module: {
    rules: [
      ...(mode === 'development' ? [
        {
          test: /\.(js)$/,
          enforce: 'pre',
          loader: 'eslint-loader',
          options: {
            emitWarning: true,
          },
          include: srcPath,
          exclude: modulesPath,
        },
      ] : []),
      {
        test: /\.(js)$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { modules: false }],
          ],
        },
        include: srcPath,
        exclude: modulesPath,
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
        ],
        include: [srcPath, modulesPath],
      },
      {
        test: /\.(vert|frag)$/,
        loader: 'raw-loader',
        include: srcPath,
        exclude: modulesPath,
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: modulesPath,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.ejs'),
      title: 'WebGL boilerplate',
      favicon: './favicon.ico',
    }),
    new MiniCssExtractPlugin(),
    ...(mode !== 'production' ? [
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.EvalSourceMapDevToolPlugin({
        moduleFilenameTemplate: (info) => (
          `file:///${info.absoluteResourcePath}`
        ),
      }),
    ] : []),
    new webpack.SourceMapDevToolPlugin({
      filename: null,
      exclude: [/node_modules/],
      test: /\.ts($|\?)/i,
    }),
  ],
};

launch.json：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            // "preLaunchTask": "tsc",
            "sourceMaps": true,
            "sourceMapPathOverrides":{
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://?app/*": "${webRoot}/*"
            }
        }
    ]
}

tsconfig：

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "inlineSourceMap": true,                  /* Emit a single file with source maps instead of having a separate file. */
    "inlineSources": true,                    /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
    "outDir": "./src/ts-built/",
    "rootDir": "./src/"
  }
}

请注意，// "preLaunchTask": "tsc";已被注释。那是编译打字稿文件的预启动任务，但是，一旦我将webpack和tsc配置为以'inline-source-map'模式工作，即使.js编译文件被prelaunchtask注释，该应用程序也将运行，打字稿中带有点文件（行为异常，行不匹配）。

因此，我不知道在inline-source-map模式配置中缺少什么，还是不应该使用普通的'souceMAps': true模式（在打字稿文件编译时生成源图）。

在此先感谢您的帮助。

1 个答案:

答案 0 :(得分：0)

我将tsconfig更改为SourMaps:true;模式，从而解决了该问题。 在更正的tsconfig下面：

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    //"inlineSourceMap": true,                  /* Emit a single file with source maps instead of having a separate file. */
    //"inlineSources": true,                    /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
    "sourceMap": true,
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
    "outDir": "./src/ts-built",
    "rootDir": "./src"
  }
}

据我研究，我认为我了解"sourceMap": true模式的工作方式。由tsc编译器生成的.map文件在调试时用于将已编译的.js映射到.ts文件。看来//"inlineSourceMap": true,和//"inlineSources": true,从.js文件末尾生成的文本（而不是分开的.map文件）获取源映射，而该模式是我期望的工作方式webpack配置中devtool的名称为'inline-source-map'。我不知道两种模式是否都可以在webpack中使用，只要这两种方法之一很好即可。但是，如果仅NO内联模式有效，并且devtool名称为'inline-source-map'，我会发现这很容易引起误解。

感谢对此的任何解释性评论。

相关问题
最新问题