This seems like something that should have been relatively simple to achieve, but alas.
I have ES6 class:
'use strict';
export class BaseModel {
constructor(options) {
console.log(options);
}
};
and root module that uses it:
'use strict';
import {BaseModel} from './base/model.js';
export let init = function init() {
console.log('In Bundle');
new BaseModel({a: 30});
};
My target is:
- pass the above through Babel, to get ES5 code
- pack the modules with webpack
- be able to debug the result
After some trial, this is the webpack config that I have:
{
entry: {
app: PATH.resolve(__dirname, 'src/bundle.js'),
},
output: {
path: PATH.resolve(__dirname, 'public/js'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}
]
}
}
This seems to be working, to an extent.
So, I can do that:
I can click F11 and enter the code, but I can't evaluate BaseModel:
which kinda defeats the purpose (or one of purposes) of debugging.
I've tried adding source-map-loader in various order with babel-loader:
{
test: /.js$/,
loader: source-map-loader
}
to no avail.
Side note 1: if I abandon webpack and just compile my modules with source maps via Babel into, say, System.js:
babel src/ --out-dir public/js/ --debug --source-maps inline --modules system
- all works properly.
Side note 2: this ?sourceMaps=true doesn't seem to do anything at all, since, if I remove source map configuration from webpack - no source maps are preserved/generated at all. One would expect the initial, Babel-produced, source maps to be preserved in the resulting files. Nope.
Any suggestions would be greatly appreciated
