代码之家  ›  专栏  ›  技术社区  ›  Daniel Hilgarth Richard

由于嵌入路径,在VS代码中找不到源映射

  •  1
  • Daniel Hilgarth Richard  · 技术社区  · 7 年前

    我有一个使用gulp构建的角度应用程序。与大多数Angular应用程序一样,代码是用TypeScript编写的,然后编译成Javascript。
    生成的Javascript文件位于TypeScript文件之外。源地图文件也位于同一文件夹中。
    当我在Chrome中打开控制台并导航到其中一个Javascript文件时,Chrome告诉我它能够检测源地图。
    当我试图从VS代码中调试应用程序时,它会告诉我:

    未验证断点,由于未找到生成的代码而忽略断点(源代码映射问题?)

    现在,我做了一些挖掘,源地图包含以下标题:

    {"version":3,"sources":["app/lib/_common/equipment/components/equipment-selection/equipmentSelection.component.ts"]
    

    源映射文件不包含 sourceRoot . 如果我编辑源映射并删除路径,只保留文件名,VS代码可以加载源映射并正确调试:

    {"version":3,"sources":["equipmentSelection.component.ts"]
    

    我需要在配置中更改什么才能生成正确的源映射?

    相关部分 gulpfile.js :

    gulp.task('typescript', ['lint'], () => {
    
        let sourcemaps = require('gulp-sourcemaps'),
            ts = require('gulp-typescript'),
            merge = require('merge2');
    
        let tsProject = ts.createProject('tsconfig.json');
    
        let tsResult = tsProject.src()
            .pipe(sourcemaps.init({}))
            .pipe(precompileNgx())
            .pipe(tsProject())
            .on('error', function () {
                gutil.log(gutil.colors.red("*** THERE IS AN ERROR IN YOUR TYPESCRIPT FILES ***"));
                gutil.log(gutil.colors.red("The code will not compile until this is fixed!"));
            });
    
        return merge([
            tsResult.dts.pipe(gulp.dest('./' + libPath)),
            tsResult.js.pipe(sourcemaps.write(".", {includeContent: true}))
                .pipe(gulp.dest('./'))
        ]);
    });
    

    tsconfig。json:

    {
        "version": "2.4.2",
        "compilerOptions": {
            "rootDir": "./",
            "sourceRoot": "./app/",
            "module": "commonjs",
            "target": "es5",
            "noEmitHelpers": false,
            "sourceMap": true,
            "moduleResolution": "node",
            "strictNullChecks": true,
            "noImplicitThis": true,
            "noImplicitReturns": true,
            "noImplicitAny": true,
            "noFallthroughCasesInSwitch": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "inlineSourceMap": false,
            //"importHelpers": true,
            "noEmitOnError": true,
            "suppressImplicitAnyIndexErrors": true,
            "noStrictGenericChecks": true,
            "skipLibCheck": true,
            "lib": [
                "es2015",
                "dom"
            ]
        },
        "exclude": [
            "build",
            "node_modules",
            "app/jspm_packages"
        ]
    }
    

    发射json:

    {
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome against localhost",
                "url": "http://localhost:8080",
                "sourceMaps": true,
                "webRoot": "${workspaceRoot}\\app"
            }
        ]
    }
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   u-ways    7 年前

    我也有同样的问题。你需要找回你的rootDir,或者提升你需要的等级。

    "compilerOptions": {
        "rootDir": "../../../../../../",
    

    考虑到项目的索引,你需要这样做。 在我的例子中,考虑到我的索引,它是这样的:

    {"version":3,"sources":["index.ts"],... "sourceRoot":"../../../src"}
    

    我希望有帮助。