使用Babel进行编译后，无法在浏览器中查看原始ES6源

Question

全部，我将SystemJS与Babel一起用作编译器，以了解如何在浏览器中从ES6生成ES5代码。当我尝试使用Chrome Dev Tools查看源代码时，看到的是ES5代码，而不是原始的ES6代码。我babelOptions在SystemJS中使用默认值config.js，如下所示：

System.config({
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  ...

我可以看到内联源代码映射插入到生成的Javascript底部，格式为：

//# sourceMappingURL=data:application/json;base64,...

Chrome浏览器不应该解释这一行并向我显示ES6代码而不是ES5代码吗？我是否会误解这样的内联源映射应该如何工作？（我已经在Chrome 43.0.2357.65和45.0.2411.0上尝试过。我也没有在Firefox 38.01上尝试过成功。我正在运行Mac OS X 10.10.2。）任何帮助将不胜感激。

Answer 1

您在哪个面板中查看源代码？在网络面板中，它应该只显示 ES6 源，因为这是通过网络加载的。在 Sources 面板中，加载路径下应该有 2 个文件：

如您所见，systemjs 动态转译了 login.js 并将其命名为 login.js!transpiled。