使用 webpack、ES6 和 Babel 进行调试

Question

这看起来应该是相对容易实现的东西，但是唉。

我有 ES6 class:

'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 中删除源映射配置 - 没有源映射preserved/generated 完全没有。人们会期望最初的、Babel 生成的源地图被保存在结果文件中。没有。

如有任何建议，我们将不胜感激

Answer 1

您需要使用编译后的变量名，而不是原始变量名。 Source maps只允许浏览器显示编译后代码对应的源代码；他们不能让浏览器从编译代码中解析原始变量名。

要查看编译后的变量名称，请切换到编译后的源代码，或者查看右侧的“范围变量”窗格，这将向您显示（就像锡罐上所说的那样）当前范围中存在哪些变量。

IIRC Babel 倾向于在模块名称前加上 _，因此您的 BaseModel 变量可能称为 _baseModel 或类似名称。

Answer 2

这是 Javascript 源映射和 babel 的问题，它在从 ES2105 模块语法编译到 CommonJS 时更改了 import-ed 模块的名称。

Babel 这样做是为了完全支持 ES2015 模块 export bindings 的事实，只要在代码中使用它们而不是在导入时解析对导入的所有引用。

如果您不编写依赖于导出绑定的模块（很可能，因为您实际上无法使用 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 3

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

调试器；

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

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

使用 webpack、ES6 和 Babel 进行调试

Debugging with webpack, ES6 and Babel

javascript

debugging

ecmascript-6

webpack

babeljs