调试器断点不正确的行。 Webpack 配置打字稿
Debugger breakpoint incorrect line. Webpack configuration typescript
我终于在我的项目中使用了 typescript，但是断点并没有停在正确的行中，并且在逐步执行中进入更多代码行之前，变量值不可用。如果源映射中不匹配，似乎有一些 ttype。
我试图按照指示 here 将 tje SourceMapDevToolPlugin 添加到 webpack 配置文件中来解决这个问题。
但是没有解决问题。
下面是我的意思的截图：
myString 未定义，尽管该行应该已执行。
直接跳转到函数后（不是跳到调用函数的const myNumber = myFunc(5);处），而且字符串的值是availabe，所以很奇怪。
在我的 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 编译文件，应用程序也会 运行，与打字稿文件中的断点（行为怪异，行不匹配）。
所以我不知道我在内联源映射模式配置中缺少什么，或者它是否应该使用正常的 'souceMAps': true 模式，其中源映射是在打字稿文件编译时生成的。
非常感谢您的帮助。
我将 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'，我发现这很容易误导。
感谢您对这方面的任何解释性评论。
我终于在我的项目中使用了 typescript，但是断点并没有停在正确的行中，并且在逐步执行中进入更多代码行之前，变量值不可用。如果源映射中不匹配，似乎有一些 ttype。 我试图按照指示 here 将 tje SourceMapDevToolPlugin 添加到 webpack 配置文件中来解决这个问题。 但是没有解决问题。
下面是我的意思的截图：
myString 未定义，尽管该行应该已执行。
直接跳转到函数后（不是跳到调用函数的const myNumber = myFunc(5);处），而且字符串的值是availabe，所以很奇怪。
在我的 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 编译文件，应用程序也会 运行，与打字稿文件中的断点（行为怪异，行不匹配）。
所以我不知道我在内联源映射模式配置中缺少什么，或者它是否应该使用正常的 'souceMAps': true 模式，其中源映射是在打字稿文件编译时生成的。
非常感谢您的帮助。
我将 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'，我发现这很容易误导。
感谢您对这方面的任何解释性评论。