使用webpack,ES6和Babel进行调试

Question

这似乎应该是相对简单的事情,但唉.

我有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});    
};

我的目标是:

1. 通过Babel传递上述内容,获取ES5代码
2. 用webpack打包模块
3. 能够调试结果

经过一些试用,这是我的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生成的源映射.不.

任何建议将不胜感激

Answer 1

这是Javascript源映射(当前不支持映射符号名称)和babel的问题,它在import从ES2105模块语法编译为CommonJS时更改-ed模块的名称.

Babel这样做是为了完全支持ES2015模块通过在代码中使用而不是在导入时解析对导入的所有引用来导出绑定这一事实.

如果您不编写依赖于导出绑定的模块(很可能,因为您实际上无法使用CommonJS执行此操作),那么您可能更喜欢在转换ES2015时保留变量名称.我创建了Babel 6的本地babel commonjs模块转换的替代品,它保留了变量名称:babel-plugin-transform-es2015-modules-commonjs-simple.这是babel-plugin-transform-es2015-modules-commonjs原生babel变换的直接替代品.

您可以将此与webpack或节点一起使用.典型的配置可能是:

npm install --save-dev babel-preset-es2015-webpack
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple

该模块babel-preset-es2015-webpack是标准es2015预设的分支,不包括模块转换,因为您要使用备用版本.这也适用于节点.这些模块用于.babelrc:

{
    "presets": [
        "es2015-webpack"
    ],
    "plugins": [
        "transform-runtime",
        ["transform-es2015-modules-commonjs-simple", {
            "noMangle": true
        }]
    ]
}

transform-runtime在任何实质性项目中包含以避免额外重复生成的代码通常是个好主意.典型模块配置webpack.config.js:

module: {
    loaders: [
        {
            loader: "babel-loader",
            include: [path.resolve(__dirname, "src")]                
        }
    ]
},
devtool: '#inline-source-map'

生成的代码不会更改导入的名称,因此使用源映射进行调试将为您提供对符号的访问.

Answer 2

您需要使用已编译的变量名称,而不是原件.源映射仅允许浏览器显示与编译代码对应的源代码; 它们无法使浏览器从已编译的代码中解析原始变量名称.

要查看已编译的变量名称,请切换到已编译的源,或查看右侧的"范围变量"窗格,这将显示当前范围中存在哪些变量(如锡上所示).

IIRC Babel倾向于为模块名称添加前缀_,因此您的BaseModel变量可能被称为_baseModel或类似.