在帶有子文件夾的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找到了原始源文件。 我認為我談論的工作區映射只是使這個問題感到困惑。