这似乎应该比较容易实现,但是可惜。
我有ES6课:
'use strict';
export class BaseModel {
constructor(options) {
console.log(options);
}
};
和使用它的根模块:
'use strict';
import {BaseModel} from './base/model.js';
export let init = function init() {
console.log('In Bundle');
new BaseModel({a: 30});
};
我的目标是:
- 通过Babel传递以上内容以获得ES5代码
- 使用webpack打包模块
- 能够调试结果
经过一番尝试,这是我拥有的webpack配置:
{
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'
}
]
}
}
在某种程度上,这似乎是可行的。
因此,我可以这样做:
我可以单击F11并输入代码,但无法评估BaseModel
:
这有点违反了调试的目的(或目的之一)。
我试着加入source-map-loader
各种顺序有babel-loader
:
{
test: /\.js$/,
loader: "source-map-loader"
}
无济于事。
旁注1:如果我放弃webpack,而只是通过Babel将带有源映射的模块编译为System.js:
babel src/ --out-dir public/js/ --debug --source-maps inline --modules system
- 一切正常。
旁注2:这?sourceMaps=true
似乎根本没有做任何事情,因为,如果我从webpack中删除源地图配置-根本不会保留/生成任何源地图。人们会希望将最初由Babel制作的原始地图保存在生成的文件中。不。
任何建议将不胜感激