使用 webpack、ES6 和 Babel 进行调试 [英] Debugging with webpack, ES6 and Babel

问题描述

这看起来应该相对容易实现，但可惜.

This seems like something that should have been relatively simple to achieve, but alas.

我有 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 配置:

After some trial, this is the webpack config that I have:

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

这在一定程度上似乎奏效了.

This seems to be working, to an extent.

所以，我可以做到:

我可以点击 F11 并输入代码，但我无法评估 BaseModel:

I can click F11 and enter the code, but I can't evaluate BaseModel:

这有点违背了调试的目的(或目的之一).

which kinda defeats the purpose (or one of purposes) of debugging.

我试过用 babel-loader 以各种顺序添加 source-map-loader :

I've tried adding source-map-loader in various order with babel-loader:

{
    test: /.js$/,
    loader: "source-map-loader"
}

无济于事.

旁注 1:如果我放弃 webpack 而只是通过 Babel 将带有源映射的模块编译为 System.js:

Side note 1: if I abandon webpack and just compile my modules with source maps via Babel into, say, System.js:

babel src/ --out-dir public/js/ --debug --source-maps inline --modules system

• 一切正常.

旁注 2:这个 ?sourceMaps=true 似乎根本没有做任何事情，因为，如果我从 webpack 中删除源映射配置 - 没有源映射完全保留/生成.人们希望最初的、由 Babel 生成的源映射保存在结果文件中.没有.

Side note 2: this ?sourceMaps=true doesn't seem to do anything at all, since, if I remove source map configuration from webpack - no source maps are preserved/generated at all. One would expect the initial, Babel-produced, source maps to be preserved in the resulting files. Nope.

任何建议将不胜感激

推荐答案

这是 Javascript 源映射的问题，目前不支持映射符号名称 和 babel，当从 ES2105 模块语法编译为 CommonJS 时，babel 会更改 import ed 模块的名称.

This is an issue with Javascript source maps, which don't currently support mapping symbol names, and babel, which changes the names of import-ed modules when compiling to CommonJS from ES2105 module syntax.

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

Babel does this to fully support the fact that ES2015 modules export bindings by resolving all references to imports whenever they are used in code, instead of at import time.

如果您不编写依赖于导出绑定的模块(很可能，因为您实际上无法使用 CommonJS 执行此操作)，那么您可能更愿意在转译 ES2015 时保留变量名称.我为 Babel 6 创建了一个保留变量名称的原生 babel commonjs 模块转换的替代方案:babel-plugin-transform-es2015-modules-commonjs-simple.这是原生 babel 转换 babel-plugin-transform-es2015-modules-commonjs 的替代品.

If you aren't writing modules that depend on exporting bindings (as is likely, since you couldn't actually do this with CommonJS), then you may prefer to preserve variable names when transpiling ES2015. I created an alternative to the native babel commonjs module transform for Babel 6 that preserves variable names: babel-plugin-transform-es2015-modules-commonjs-simple. This is a drop-in replacement for babel-plugin-transform-es2015-modules-commonjs, the native babel transform.

你可以在 webpack 或 node 中使用它.典型的配置可能是:

You can use this with webpack or node. A typical config might be:

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 中使用了这些模块:

The module babel-preset-es2015-webpack is a fork of the standard es2015 preset that does not include the module transform, because you want to use the alternate version. This works for node also. These modules are used in .babelrc:

{
    "presets": [
        "es2015-webpack"
    ],
    "plugins": [
        "transform-runtime",
        ["transform-es2015-modules-commonjs-simple", {
            "noMangle": true
        }]
    ]
}

transform-runtime 通常是包含在任何实质性项目中的好主意，以避免额外重复生成的代码.webpack.config.js 中的典型模块配置:

transform-runtime is usually a good idea to include in any substantive project to avoid extra repetition of generated code. Typical module config in webpack.config.js:

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

生成的代码不会更改导入的名称，因此使用源映射进行调试将使您能够访问符号.

The resulting code won't change the names of imports, so debugging with source maps will provide you with access to symbols.

这篇关于使用 webpack、ES6 和 Babel 进行调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！