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

Question

I've been experimenting with babel using the grunt-babel plugin. Here's my current configuration.

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

And here's my directory structure, where the dist folder contains the generated files which are served on my localhost via grunt connect.

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

When debugging the code the with a console.log in browser the line numbers are incorrect due to the sourcemaps not being picked up. To resolve this i mapped the network file to the local resource like this.

My first question is should i map to the /dist generated files or the original files in /assets?

When choosing /dist and dev tools reloads i get the below errors.

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]

Does that mean i need to update one of the following babel options variables to accomodate the dist file?

sourceMapTarget
sourceFileName
sourceRoot

I'm new to using sourcemaps and babel so I'm assuming I'm making a rookie mistake somewhere. I want to kick on and explore ES2015 more but without the source mapping debugging is major headache.

I have read about webpack, browserify and gulp so longer term i will move the build steps to one of those tools but in the short term i want to resolve the issue with my current setup.

Answer 1

The issue was that the grunt-connect task was serving the /dist as /. When i changed the grunt task to serve / as / the original source files were found by the sourcemaps. I think the workspace mapping i talked about was just confusing the issue.