如何在不安装Babel本身的情况下直接从脚本标记使用Babel

我正在使用cdnjs.com中介绍的所有这些库编写RESPECT。但是，我发现它报告错误："未捕获TypeError：无法读取未定义的属性"key""，即使我没有编写一行javascript代码也是如此。

怎么会发生这种情况？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script text="text/babel">
//some code here

</script>

---

解决方案

在浏览器中包含巴别塔实际上不是它应该的工作方式。

Babel是一个构建工具-它应该只是构建过程的一部分。最常见的是，您可以使用像webpack或Browserify这样的捆绑器，它们可以使用Babel将您的代码从ES6转换到ES5(或其他目标版本)。

Here您可以看到将Babel包含到生成过程中的所有不同方式。

这样，所有处理都在您的计算机/服务器上进行，并且您不需要在客户端中包含Babel，因为它将只接收它可以理解的转换后的代码。

但是，可以使用babel-standalone在浏览器中直接转换代码。您可以在此处看到它的工作方式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script text="text/babel">
  var input = 'const getMessage = () => "Hello World";';
  var output = Babel.transform(input, {
    presets: ['es2015']
  }).code;
  console.log(output);
</script>

但是，您几乎不需要使用此方法。