Question

我只能看到.js文件，.ts来源不会出现在Firefox中。

它适用于Chrome，我可以在.ts文件中查看和放置换行符，调试器效果很好。但是Firefox不会工作，没有版本，没有稳定或夜间或开发者版本。

可能是Mac / OSX上没有实现该功能吗？如果是这样的话，互联网上应该有一些东西，但我什么都没发现。显然，问题没有记录在任何地方。

有没有人对此有任何了解，也许还有如何修复它？

Answer 1

有点晚，但希望有帮助。

对于Firefox，请确保您拥有＆＃34;显示原始资源＆＃34;检查调试器设置。

接下来，您的已编译的javascript 必须具有.map文件的绝对路径引用，路径引用应出现在已编译的js文件的末尾，并且如下所示：

//＃sourceMappingURL = http://localhost:9000/dist/customElements/listview.js.map

您可能拥有sourceMappingURL但指定为相对路径。 FF似乎不喜欢源图的相对路径。

当然这是在你编译的js中，因此每次你将ts编译为js时，你需要重置sourceMappingURL。这很快就会变得很烦人。

如果您正在使用Gulp（或可能是其他任务运行程序），您可以在gulp.task中为编译打字稿的映射URL设置前缀选项（sourceMappingURLPrefix）。（见https://github.com/floridoo/gulp-sourcemaps）

我编译的.js位于\ dist子文件夹中。不幸的是，前缀选项对子文件夹没有帮助。幸运的是，Gulp也可以通过为sourceMappingURLPrefix指定函数来处理这个问题。

该函数传递了一个对象，该对象具有到编译的js的路径，因此通过一些字符串操作，您也可以创建.map文件的路径（我的文件夹在同一个文件夹中）。

我的gulp构建任务看起来像这样（参见sourceMappingURLPrefix）：

gulp.task('build-system', function() {
    if(!typescriptCompiler) {
         typescriptCompiler = typescript.createProject('tsconfig.json', {
         "typescript": require('typescript')
      });
 }
return gulp.src(paths.dtsSrc.concat(paths.source))
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(changed(paths.output, {extension: '.ts'}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(typescript(typescriptCompiler))
    .pipe(sourcemaps.write('.', {
        includeContent: false, 
        sourceRoot: '/src',
        sourceMappingURLPrefix: function (file) {
            var mapPath = file.path.split(/[\\\/]/); //split path into component parts
            return 'http://localhost:9000/dist/' + mapPath.slice(1, mapPath.length - 1).join('/') //prepend my local webserver and dist folder then re-join discarding the last slice which is the compiled .js file name.
        }
    }))
    .pipe(gulp.dest(paths.output));
});

现在为我编译的js中的sourceMappingURL生成一个绝对路径，它也正确引用子文件夹，如下所示：/＃sourceMappingURL = http://localhost:9000/dist/customElements/listview.js.map

Firefox正在按预期加载.ts文件和调试器功能。它也适用于Chrome。

我没有Gulp专家，所以如果有更好的方法我很想知道。

更新：我最近改用了aurelia-cli，到目前为止，我发现它比Gulp + jspm简单得多。 Firefox和＆amp; Chrome无需任何配置即可正确获取.ts文件。

Firefox没有在调试器中显示typescript（.ts）源映射

1 个答案: