javascript - 使用 Babel 编译后无法在浏览器中查看原始 ES6 源代码

Question

总之，我使用 SystemJS 和 Babel 作为转译器来学习如何在我的浏览器上从 ES6 生成 ES5 代码。当我尝试使用 Chrome 开发工具查看源代码时，我看到的是 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。