Sourcemap improvements

[JeroenVinke]

There are a couple things we should fix regarding sourcemaps.

• Console.log gets confused of the origin (If a library in vendor-bundle has sourcemaps, then chrome gets confused about the origin of console.log's #592)
  When webpack encounters a transpiled javascript file with no sourcemap, it creates a sourcemap for the transpiled file. The CLI does not do this, it only adds sourcemaps to the .map file when it finds a sourcemap. If we do what webpack does it'll resolve If a library in vendor-bundle has sourcemaps, then chrome gets confused about the origin of console.log's #592 and will give a much nicer debug experience for the vendor-bundle, because chrome will know which part of the vendor-bundle belongs to which library, and all libraries will show up in the sources panel of Chrome. This is what we could use to generate source maps for transpiled files.

• Multiple instances of sourceMappingUrl (Multiple instances of sourceMappingUrl cause issues in Edge/IE #532)
  The CLI uses the sourceMappingUrl comments in javascript sources to create a .map file containing all sourcemaps. At the bottom of the bundle a new sourceMappingUrl comment is appended pointing to this .map file. This is the only instance of sourceMappingUrl that should be in the bundle, as otherwise IE and Edge gets confused. So we should strip all other sourceMappingUrl comments.

• Base64 sourcemaps are not included
  The if-statement here causes base64 sourcemaps not to be included in the generated .map file.

The write function of the Bundler has too many responsibilities. We should extract source map generation into a different module, if possible

[EisenbergEffect]

Sounds good.

…

On May 10, 2017 1:37 AM, "Jeroen Vinke" ***@***.***> wrote: There are a couple things we should fix regarding sourcemaps. - *Console.log gets confused of the origin* (#592 <#592>) When webpack encounters a transpiled javascript file with no sourcemap, it creates a sourcemap for the transpiled file. The CLI does not do this, it only adds sourcemaps to the .map file when it finds a sourcemap. If we do what webpack does it'll resolve #592 <#592> and will give a much nicer debug experience for the vendor-bundle, because chrome will know which part of the vendor-bundle belongs to which library, and all libraries will show up in the sources panel of Chrome. This <https://github.com/gulp-sourcemaps/gulp-sourcemaps/blob/master/src/init/index.js#L58-L74> is what we could use to generate source maps for transpiled files. - *Multiple instances of sourceMappingUrl* (#532 <#532>) The CLI uses the sourceMappingUrl comments in javascript sources to create a .map file containing all sourcemaps. At the bottom of the bundle a new sourceMappingUrl comment is appended pointing to this .map file. This is the only instance of sourceMappingUrl that should be in the bundle, as otherwise IE and Edge gets confused. So we should strip all other sourceMappingUrl comments. - *Base64 sourcemaps are not included* The if-statement here <https://github.com/aurelia/cli/blob/master/lib/build/bundle.js#L166-L170> causes base64 sourcemaps not to be included in the generated .map file. The write function <https://github.com/aurelia/cli/blob/master/lib/build/bundle.js#L115-L283> of the Bundler has too many responsibilities. We should extract source map generation into a different module, if possible — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#624>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIBnZZAvJ6iumEx2TR4Smgoo_3HyJhtks5r4XdigaJpZM4NWV_D> .

[jholland918]

Is debugging with sourcemaps supported when using WebPack? Or is it only supported for projects created using the requirejs/systemjs options? I ask because I'm trying out unit testing for a project using the WebPack option and I'm only able to debug through the transpiled JavaScript.

[Alexander-Taran]

@jholland918 it is supported. depends on how you configure typescript/babel and webpack
HMR though breaks the maps.. after 1st hot injection

[Alexander-Taran]

@3cp I think we're mostly ok here..

[3cp]

The cli-bundler is quite big without enough unit test coverage. I would not attempt fixing the source map :-)

The webpack setup should be fine, especially if you use jest.
Our webpack + jasmine uses some special patch to support aurelia's module loading. I am not surprised if something is not working correctly. That's probably @jholland918's setup.

If you encountered source map issue with webpack + jest with latest skeleton, please open a new issue.