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

我的目标是：

通过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生成的源映射。不。

非常感谢任何建议

Answer 1

这是Javascript源地图的问题，don't currently support mapping symbol names和babel，它在从ES2105模块语法编译为CommonJS时更改了import - ed模块的名称。

Babel通过在代码中使用导入时解析对导入的所有引用来完全支持ES2015模块export bindings这一事实，而不是在导入时。

如果您没有编写依赖于导出绑定的模块（很可能，因为您无法通过CommonJS实际执行此操作），那么您可能更喜欢在转换ES2015时保留变量名称。我创建了Babel 6的本地babel commonjs模块转换的替代方法，它保留了变量名称：babel-plugin-transform-es2015-modules-commonjs-simple。这是本地babel变换babel-plugin-transform-es2015-modules-commonjs的替代品。

您可以将此与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也不起作用，调试器仍会步进。

使用webpack，ES6和Babel进行调试

3 个答案: