javascript - 使用 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:

{
    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 生成的源 map 被保存在结果文件中。不。

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

Answer 1

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

Babel 这样做是为了完全支持 ES2015 模块 export bindings通过在代码中而不是在导入时解析对导入的所有引用。

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

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