在子文件夹

Question

我一直在使用grunt-babel插件试验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在我的localhost上提供的生成文件。

- 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

我很擅长使用源图和babel，所以我假设我在某个地方犯了一个菜鸟错误。我想继续探索ES2015，但没有源映射调试是一个令人头疼的问题。

我已经阅读了关于webpack，browserify和gulp的内容，所以我将把构建步骤移到其中一个工具上，但在短期内我想用我当前的设置解决问题。

Answer 1

问题是grunt-connect任务正在/ /作为/。当我将grunt任务更改为serve / as时，源映射找到原始源文件。我认为我所谈到的工作空间映射只是让问题混乱。