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

问题描述

我有ES6课程：

 'use strict'; 
 
 export class BaseModel {
 constructor（options）{
 console.log（options）; 
} 
}; 
  

和使用它的根模块：

 'use strict';来自'./base/model.js'的
 
 import {BaseModel}; 
 
 export let init = function init（）{
 console.log（'In Bundle'）; 
新的BaseModel（{a：30}）; 
}; 
  

我的目标是：

$ b

通过Babel传递以上内容，以获取ES5代码

使用webpack打包模块

能调试结果

经过一些试用，这是我拥有的webpack配置： p>

  {
条目：{
 app：PATH.resolve（__ dirname，'src / bundle.js'） ，
}，
输出：{
路径：PATH.resolve（__ dirname，'public / js'），
 filename：'bundle.js'
} 
 devtool：'inline-source-map'，
 module：{
 loaders：[
 {
 test：/\.js$/，
排除：/（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 --sourc电子地图inline  - 模块系统
  

• 都可以正常工作。 li>
  

备注2 ：这个？sourceMaps = true 似乎没有做任何事情，因为，如果我从Webpack中删除源地图配置 - 没有源地图保留/生成所有。人们会期望在生成的文件中保留初始的Babel生成的源映射。不，

任何建议将不胜感激

解决方案

这是Javascript源地图的一个问题，目前不支持映射符号名称和babel，它们从ES2105模块语法编译为CommonJS时，更改 import -ed模块的名称。

Babel完全支持ES2015模块导出绑定的事实通过解析导入的所有引用，而不是在导入时使用。

如果您不编写依赖导出绑定的模块（可能的话） ，因为你实际上不能用CommonJS这样做），那么你可能更喜欢在传播ES2015时保留变量名。我为Babel 6创建了一个替代本地babel commonjs模块转换，保留变量名称： babel -plugin-transform-es2015-modules-commonjs-simple 。这是一个替代 babel-plugin-transform-es2015-modules-commonjs ，本地的babel转换。

您可以将其与webpack或node配合使用。典型的配置可能是：

  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 ：

  {
 预设：[
es2015-webpack
]，
plugins：[
transform-runtime，
 [transform-es2015-modules -commonjs-simple，{
noMangle：true 
}] 
] 
} 
  

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

  module：{ 
装载机：[
 {
 loader：babel-loader，
 include：[path.resolve（__ dirname，src）] 
} 
] 
}，
 devtool：'＃inline-source-map'
  

所得到的代码不会更改导入的名称，因此使用源地图进行调试将为您提供对符号的访问。

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

I have ES6 class:

'use strict';

export class BaseModel {  
    constructor(options) {
        console.log(options);
    }
};

and root module that uses it:

'use strict';

import {BaseModel} from './base/model.js';

export let init = function init() {
    console.log('In Bundle');
    new BaseModel({a: 30});    
};

My target is:

1. pass the above through Babel, to get ES5 code
2. pack the modules with webpack
3. be able to debug the result

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.

So, I can do that:

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.

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

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

to no avail.

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

• all works properly.

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.

Any suggestions would be greatly appreciated

解决方案

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 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.

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.

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

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 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屋！