我正在尝试将Ecmascript 2015用于我的项目,并且我发现很难在特定的地方添加断点(我认为有一个断点是合乎逻辑的).
我将chrome中的#enable-javascript-harmony标志设置为true(如果有帮助),但我使用babeljs进行转换并使用源映射直接在我要调试的文件中设置断点.我最确定我做错了什么但是有人能指出我犯错的地方.
作为参考,我添加了一个我正在谈论的GIF.
javascript google-chrome google-chrome-devtools ecmascript-6
在玩Babel和Webpack的时候,我偶然发现了一些非常奇怪的行为.
我向我扔了一个调试器, main.js看看我是否正确导入,但Chrome的控制台一直在大喊我试图导入的模块没有定义.我尝试控制台记录相同的模块,我看到它打印到我的控制台.
是什么赋予了?我已粘贴下面的相关代码段:
main.js
import Thing from './Thing.js';
debugger // if you type Thing into the console, it is not defined
console.log(new Thing()); // if you let the script finish running, this works
Run Code Online (Sandbox Code Playgroud)
thing.js
class Thing {
}
export default Thing;
Run Code Online (Sandbox Code Playgroud)
webpack.config.js
var path = require('path');
module.exports = {
entry: './js/main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: path.join(__dirname, 'js'), loader: 'babel-loader' }
]
}
};
Run Code Online (Sandbox Code Playgroud)