使用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 ：

这有点挫败了调试的目的（或目的之一）。

我尝试用babel-loader以各种顺序添加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的问题，它在从ES2105模块语法编译为CommonJS时更改了import模块的名称。

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

如果您不编写依赖于导出绑定的模块（很可能，因为您实际上无法使用CommonJS执行此操作），那么您可能更喜欢在转换ES2015时保留变量名称。 我创建了Babel 6的本地babel commonjs模块转换的替代品，它保留了变量名称： babel-plugin-transform-es2015-modules-commonjs-simple 。 这是babel-plugin-transform-es2015-modules-commonjs的原始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或类似名称。

Answer 3

通过添加声明我取得了一些成功

调试器;

在你的javascript / typescript文件中甚至在angular或vue2的框架文件中，如* .vue

因此，即使文件被转换或更改或重命名，或者您的路径映射到URL也不起作用，调试器仍将执行。