在带有子文件夹的chrome dev-tools中找不到Grunt Babel Sourcemaps

Question

我一直在使用grunt-babel插件尝试grunt-babel 。 这是我当前的配置。

    babel: {
        options: {
            sourceMap: true,
            presets: ['es2015']
        },
        dist: {
            files: {
                'dist/assets/js/sql-query-builder.js': 'assets/js/sql-query-builder.js',
            }
        }
    }

这是我的目录结构，其中dist文件夹包含生成的文件，这些文件通过grunt connect在我的本地主机上提供。

- assets
   - js
     - files.js
- dist
  - assets
   - js
     - files.js

在浏览器中使用console.log调试代码时，由于未提取源映射，所以行号不正确。 为了解决这个问题，我将网络文件映射到这样的本地资源。

我的第一个问题是我应该映射到/ dist生成的文件还是/ assets中的原始文件？

选择/ dist和dev工具重新加载时，出现以下错误。

Source map http://localhost:9001/assets/js/sql-query-builder.js.map points to the files missing from the workspace: [http://localhost:9001/assets/js/sql-query-builder.js]

这是否意味着我需要更新以下babel选项变量之一以适应dist文件？

sourceMapTarget
sourceFileName
sourceRoot

我是使用sourcemaps和babel的新手，所以我假设我在某个地方犯了一个菜鸟错误。 我想继续探索ES2015，但如果没有源映射调试，就会非常头痛。

我已经阅读了有关webpack，browserify和gulp的信息，因此从更长远的角度来看，我会将构建步骤移至这些工具之一，但短期而言，我想用当前的设置解决问题。

Answer 1

问题是grunt-connect任务将/ dist用作/。 当我将grunt任务更改为/ as /时，sourcemaps找到了原始源文件。 我认为我谈论的工作区映射只是使这个问题感到困惑。