javascript - Chrome 和 Firefox Sourcemaps 不工作

Question

在 Chrome 和 Firefox 中，Sourcemaps 似乎已停止为我工作。浏览器显示源文件名。当我单击该文件时，我收到此消息，Cannot GET/.tmp/includes/jsbin/marketing.js。 marketing.js 是源文件的名称。对于每个源文件，我都收到相同的消息。

我使用 Grunt 作为我的任务运行器。这是工作流程。

1. Babel 将我的 javascript 转换为 .tmp 文件夹。
2. Uglify 合并并缩小 .tmp 文件夹中的 javascript 文件并将它们输出到 dist 文件夹。
3. Uglify 创建源映射文件。

当我查看 sourcemap 文件时，它具有指向 .tmp 文件夹中源文件的正确路径。

{"version":3,"sources":["../../../.tmp/includes/jsbin/check_compat.js","../../../.tmp/includes/jsbin/marketing.js"],

这对我来说是一个新的工作流程。在其他项目中，当我不使用 babel 时一切正常。我在最新版本的 Chrome 和 Firefox 中遇到了这个问题，甚至是这些浏览器的金丝雀版本。

babel 任务不连接。

更新 2015/10/27

由于某种原因，.tmp 文件夹没有得到服务。因此浏览器从 sourcemap 中看到源文件存在，但源文件是空的，因为服务器不提供它。

这是我的 grunt 任务:

config: {
    app: 'app',
    dev: 'dev',
    dist: 'dist',
    tmp: '.tmp'
},
dist: {
    options: {
        base: ['<%= config.tmp %>', '<%= config.dist %>'],
        open: {
            target: 'http://localhost:<%= connect.options.port %>?envMode=apiary&testing=true'
        }
    }
}

您可以在开发工具中看到这些文件。

如果我右键单击文件并选择“在新选项卡中打开链接”，我会收到错误消息 Cannot GET/.tmp/includes/jsbin/check_compat.js

Answer 1

您的 js 文件底部是否有正确的引用？

应该是这样的:

//# sourceMappingURL=main.js.map