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

Question

总而言之，我正在使用 SystemJS 和 Babel 作为转译器来学习如何在我的浏览器上从 ES6 生成 ES5 代码。当我尝试使用 Chrome 开发工具查看源代码时，我看到的是 ES5 代码，而不是我原来的 ES6 代码。我在我的 SystemJS config.js 中使用默认的 babelOptions，如下所示:

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

我可以看到插入在生成的 Javascript 底部的内联源映射，格式如下:

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

Chrome 不应该解释该行并向我显示 ES6 代码而不是 ES5 代码吗？我是否误解了像这样的内联源 map 应该如何工作？ (我在 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。