在使用Babel进行转换后，无法在浏览器中查看原始ES6源代码

Question

所有，我使用SystemJS和Babel作为转换器来学习如何在我的浏览器上从ES6生成ES5代码。当我尝试使用Chrome开发工具查看源代码时，我看到的是ES5代码，而不是我原来的ES6代码。我在我的SystemJS babelOptions中使用默认的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源，因为它是通过网络加载的。在“源”面板中，加载的路径下应该有2个文件：

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