webstorm 7/karma 服务器在调试咖啡脚本时寻找错误的源映射文件

Question

在使用 karma 测试运行程序进行测试时，我正忙着让调试器处理我的咖啡脚本文件。

假设，我需要做的就是告诉 Webstorm 文件观察器生成源映射，并且调试器将与 karma 测试运行器一起工作。不幸的是，调试器似乎无法识别 coffeescript 编译器输出的映射文件。它寻找 file.coffee -> file.js.map。但是，尽管尝试获得其他结果，但地图文件始终是 file.coffee -> file.map

我的 karma 配置文件有以下内容（显然不是全部，只是相关部分）：

module.exports = (config) ->
  config.set
    files: [
      '../app/scripts/**/*.coffee'
      'spec/*.coffee']
    preprocessors: {
      '../**/*.coffee': 'coffee'
    }

我已经尝试了文件观察器的各种配置：

带有参数的单个文件观察程序：“--compile --bare --map $FileName$”，输出路径刷新为：“$FileNameWithoutExtension$.js.map”或“$FileNameWithoutExtension$.js :$FileNameWithoutExtension$.js.map"

第一个版本生成一个空白 file.js.map，第二个版本生成一个空白 file.js.map 和标准 file.map，这是一个很好的源映射文件。

我尝试了一个只有“--compile --bare”输出路径的文件观察器：“$FileNameWithoutExtension$.js”，另一个只有“--map”输出路径：“$FileNameWithoutExtension$. js.map”。这会输出一个空白的 file.js.map 并且没有实际的地图。

我尝试了一个只有“--compile --bare”输出路径的文件观察器：“$FileNameWithoutExtension$.js”，另一个只有“--compile --map”输出路径：“$ FileNameWithoutExtension$.js.map”。这会输出一个空白的 file.js.map 并且没有实际的地图。

同时，当我在调试模式下运行测试时，Karma 服务器报告：

WARN [web-server]: 404: /base/spec/schedule-spec.js.map?time=1380945586331
WARN [web-server]: 404: /absolute/Users/Randolph/Documents/Sites/MTF-Minimal/app/scripts/app.js.map?time=1380945586083
etc...

很明显，服务器假设地图将被称为 file.js.map，而实际上 coffeescript 输出的 file.map 没有“js”。我似乎无法更改输出源映射文件的名称，也看不到在哪里告诉调试器要查找的内容。

顺便说一句，调试器还告诉我，它找不到加载了我的文件（如 angular.js 和 jquery.js）的非咖啡脚本库的映射文件。也许这是错误的线索。

我已向 JetBrains 提交了工单，并将在此处分享他们的回复。但是，如果有人知道解决方案，请告诉我。

谢谢！

Answer 1

让调试器使用文件观察器生成的 .js 和 .map 文件的唯一方法是将这些生成的 .js 文件加载到您的 karma 配置文件中，而不是 .coffee 文件中。当您加载 .coffee 文件时，业力实际上不是提供由转译器生成的文件，而是提供由咖啡预处理器生成的 .js 文件，并且这些文件没有生成源映射，因此调试器不知道如何将它们映射到你的咖啡文件。你有两个选择：

• 加载由文件观察器生成的 .js 文件，而不是 karma 配置中的原始 .coffee 文件，例如：

(sn-p)

files: [
'../app/scripts/**/*.js'
'spec/*.js'
]

• 在 karma 中配置 coffeePreprocessor 以使用源映射，例如：

(sn-p)

files: [
'../app/scripts/**/*.coffee'
'spec/*.cofee'
],
preprocessors: {
            '**/*.coffee': ['coffee']
        },
coffeePreprocessor: {
            options: {
                bare: true,
                sourceMap: true
            },
            // transforming the filenames
            transformPath: function ( path ) {
                return path.replace( /\.js$/, '.coffee' );
            }
        },
...

为了能够使用第二个选项，您需要确保使用最新版本的 karma 和 karma-coffee-preprocessor