使用webpack，ES6和Babel进行debugging
这似乎是应该相对简单的事情，但唉。
我有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打包模块
- 能够debugging结果
经过一些试用，这是我有的webpackconfiguration：
{ 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并input代码，但我无法评估BaseModel ：
这有损于debugging的目的（或目的之一）。
我试着用babel-loader以各种顺序添加source-map-loader 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似乎根本没有做任何事情，因为如果我从webpack中删除源地图configuration – 根本不会保存/生成源地图。 人们会期望在生成的文件中保存最初的Babel生成的源地图。 不。
任何build议将不胜感激
这是JavaScript源代码地图的一个问题，它目前不支持映射符号名称 ，而babel在从ES2105模块语法编译为CommonJS时会更改import模块的名称。
Babel这样做是为了完全支持ES2015模块导出绑定的事实，即通过在代码中使用导入时parsing所有对导入的引用，而不是在导入时。
如果你没有编写依赖于导出绑定的模块（很可能，因为你实际上无法使用CommonJS），那么在转换ES2015时，你可能更喜欢保留variables名称。 我创build了Babel 6的本地babel commonjs模块转换的替代scheme，保留了variables名称： babel-plugin-transform-es2015-modules-commonjs-simple 。 这是替代babel-plugin-transform-es2015-modules-commonjs （本地babel变换）的替代品。
你可以在webpack或节点上使用它。 一个典型的configuration可能是：
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典型模块configuration：
module: { loaders: [ { loader: "babel-loader", include: [path.resolve(__dirname, "src")] } ] }, devtool: '#inline-source-map'
生成的代码不会更改导入的名称，因此使用源映射进行debugging将为您提供对符号的访问。
您将需要使用编译的variables名称，而不是原件。 源地图只允许浏览器显示对应于编译代码的源代码; 他们不能使浏览器从编译后的代码中parsing原始的variables名称。
要查看已编译的variables名称，可以切换到已编译的源代码，或者查看右侧的“范围variables”窗格，这将显示当前范围中存在的variables（如上所述）。
IIRC Babel倾向于用_前缀模块名，所以你的BaseModelvariables可能被称为_baseModel或类似的。
