Javascript 使用webpack、ES6和Babel进行调试

这似乎是一件本应该相对容易实现的事情，但遗憾的是

我有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打包模块

能够调试结果

经过试用，这是我的网页配置：

{
    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

按不同顺序添加

源地图加载器

：

{
    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

似乎没有任何作用，因为如果我从网页包中删除源地图配置，则根本不会保留/生成任何源地图。人们会期望巴贝尔制作的原始源地图会保存在生成的文件中。没有

---

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

您需要使用已编译的变量名，而不是原始变量名。源代码映射仅允许浏览器显示与已编译代码相对应的源代码；他们不能让浏览器从编译的代码中解析原始变量名

要查看已编译的变量名，请切换到已编译的源代码，或查看右侧的“范围变量”窗格，该窗格将显示（如tin上所述）当前范围中存在哪些变量

---

IIRC Babel倾向于在模块名称前面加上

，因此您的

BaseModel

变量可能被称为

\u BaseModel

或类似变量。

这是Javascript源代码映射的问题，后者和Babel在从ES2105模块语法编译到CommonJS时更改

导入的

-ed模块的名称

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

如果您没有编写依赖于导出绑定的模块（很可能，因为您实际上无法使用CommonJS实现这一点），那么在传输ES2015时，您可能更愿意保留变量名。我为babel 6创建了本机babel commonjs模块转换的替代方案，该转换保留变量名：。这是本机巴别塔转换的替代品

babel-plugin-transform-es2015-modules-commonjs

您可以将其用于网页包或节点。典型的配置可能是：

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
        }]
    ]
}

transformruntime

通常是一个好主意，可以将其包含在任何实质性项目中，以避免生成的代码的额外重复。

webpack.config.js

中的典型模块配置：

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

---

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

我通过添加该语句获得了一些成功

调试器

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

---

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

我明白了问题所在。但这并不意味着它无法解决。归根结底，源代码映射只是一个映射。理论上，webpack可以链接回巴贝尔制作的原始源地图。他们甚至声称，AFAIU，使用

源地图加载器

，这似乎是可能的。此外，它不在范围变量中，而是在闭包中。Webpack正在正确处理Babel源地图。如果不是，原始源地图将不会显示在Chrome中。但是，不管源映射是如何生成的，都不会影响JavaScript控制台的行为。JavaScript控制台（REPL，与源代码窗格不同）将始终反映已编译源代码的变量名等，即浏览器实际执行的源代码，而不是原始源代码。我一定误解了你的意思。当我将System.js+babel和transfile文件与源代码映射一起使用时，我完全可以看到源代码和开发工具都引用了原始属性名称等。有关使用的screnshot和命令，请参见侧注1的编辑。（当然，控制台会打印出一个“真实的”

toString

，但这不是问题所在。啊，我明白了。我不知何故忘记了一个事实，即Webpack重写

需要将

作为编译的一部分。是Webpack改变了“这些变量名，而不是Babel”。（续）非常好！必须尝试一下这个..调试Web包捆绑和传输的代码似乎有点痛苦=（肯定让我怀念以前的gulp/es5 JS routeThanks..对我们非常有帮助，特别是在让开发人员购买完全传输的工作流程方面。Babel可以很容易地在本机支持它（因为我的代码只是对本机模块的微小更改），但巴贝尔团队选择了纯粹/完整与实用的路线。就我个人而言，没有良好的调试经验我无法生存，但没有编写带有动态绑定的模块我也可以生存。我希望源代码映射中的符号规范很快出现，使所有这些都变得不必要，但过程似乎很缓慢。@JamieTreworgy你，我的朋友，是一个英雄。我最近开始探究这个问题，因为它开始困扰我。谢谢你。我感兴趣的每个人