Javascript 使用 webpack、ES6 和 Babel 进行调试
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32211649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debugging with webpack, ES6 and Babel
提问by ZenMaster
This seems like something that should have been relatively simple to achieve, but alas.
这看起来应该是相对容易实现的，但可惜。
I have ES6 class:
我有 ES6 类：
'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:
我的目标是：
- pass the above through Babel, to get ES5 code
- pack the modules with webpack
- be able to debug the result
- 通过 Babel 将上述内容传递给 ES5 代码
- 使用 webpack 打包模块
- 能够调试结果
After some trial, this is the webpack config that I have:
经过一些试验，这是我拥有的 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'
}
]
}
}
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:
我可以点击 F11 并输入代码，但我无法评估BaseModel：
which kinda defeats the purpose (or one of purposes) of debugging.
这有点违背了调试的目的（或目的之一）。
I've triedadding source-map-loaderin various order with babel-loader:
我试着加入source-map-loader各种顺序有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:
旁注 1：如果我放弃 webpack 并通过 Babel 将带有源映射的模块编译为 System.js：
babel src/ --out-dir public/js/ --debug --source-maps inline --modules system
- all works properly.
- 一切正常。
Side note 2: this ?sourceMaps=truedoesn'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.
旁注 2：这?sourceMaps=true似乎根本没有做任何事情，因为，如果我从 webpack 中删除源映射配置 - 根本不会保留/生成源映射。人们期望最初的、由 Babel 生成的源映射保存在结果文件中。不。
Any suggestions would be greatly appreciated
任何建议将不胜感激
采纳答案by Jamie Treworgy
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.
这是 Javascript 源映射的一个问题，它目前不支持映射符号名称，而 babel 会在import从 ES2105 模块语法编译为 CommonJS 时更改-ed 模块的名称。
Babel does this to fully support the fact that ES2015 modules export bindingsby resolving all references to imports whenever they are used in code, instead of at import time.
Babel 这样做是为了完全支持 ES2015 模块导出绑定的事实，通过在代码中而不是在导入时解析所有对导入的引用。
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.
如果您不编写依赖于导出绑定的模块（很可能，因为您实际上无法使用 CommonJS 执行此操作），那么您可能更愿意在转译 ES2015 时保留变量名称。我为 Babel 6 创建了一个替代原生 babel commonjs 模块转换的方法，它保留了变量名称：babel-plugin-transform-es2015-modules-commonjs-simple。这是babel-plugin-transform-es2015-modules-commonjs对原生 babel 转换的直接替代。
You can use this with webpack or node. A typical config might be:
您可以将它与 webpack 或 node 一起使用。典型的配置可能是：
npm install --save-dev babel-preset-es2015-webpack
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs-simple
The module babel-preset-es2015-webpackis a fork of the standard es2015 preset that does notinclude the module transform, because you want to use the alternate version. This works for node also. These modules are used in .babelrc:
该模块babel-preset-es2015-webpack是标准 es2015 预设的一个分支，不包括模块转换，因为您要使用替代版本。这也适用于节点。这些模块用于.babelrc：
{
"presets": [
"es2015-webpack"
],
"plugins": [
"transform-runtime",
["transform-es2015-modules-commonjs-simple", {
"noMangle": true
}]
]
}
transform-runtimeis usually a good idea to include in any substantive project to avoid extra repetition of generated code. Typical module config in webpack.config.js:
transform-runtime将其包含在任何实质性项目中通常是一个好主意，以避免额外重复生成的代码。典型的模块配置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.
生成的代码不会更改导入的名称，因此使用源映射进行调试将为您提供对符号的访问。
回答by Jordan Running
You'll need to use the compiled variable names, not the originals. Source maps only allow the browser to display the source code that corresponds to the compiled code; they can't make the browser resolve original variable names from the compiled code.
您需要使用编译后的变量名，而不是原始变量名。Source maps 只允许浏览器显示编译后的代码对应的源代码；它们不能让浏览器从编译后的代码中解析原始变量名。
To see the compiled variable names, either switch to the compiled source, or look in the Scope Variables pane on the right, which will show you (like it says on the tin) what variables exist in the current scope.
要查看已编译的变量名称，请切换到已编译的源代码，或查看右侧的 Scope Variables 窗格，它会向您显示（就像它在罐子上说的那样）当前范围中存在哪些变量。
IIRC Babel tends to prefix module names with _, so your BaseModelvariable is probably called _baseModelor similar.
IIRC Babel 倾向于使用 前缀模块名称_，因此您的BaseModel变量可能被称为_baseModel或类似。
回答by 1P0
I had some good success by adding the statement
通过添加声明，我取得了一些不错的成功
debugger;
调试器；
in your javascript/typescript files even in framework files of angular or vue2 like *.vue
在你的 javascript/typescript 文件中，甚至在像 *.vue 这样的 angular 或 vue2 的框架文件中
So even if the file gets converted or changed or renamed or your path mappings to URL don't work, the debugger will step anyway.
因此，即使文件被转换、更改或重命名，或者您到 URL 的路径映射不起作用，调试器仍然会执行。
