如何直接从脚本标签使用babel而不自行安装babel

Question

我正在用从cdnjs.com引入的所有这些库编写响应。但是，我发现它报告了错误：'Uncaught TypeError：即使我没有写一行JavaScript代码，也无法读取未定义的属性'keys'。

怎么会这样

<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>

Answer 1

在浏览器中包含babel并不是它应该工作的方式。

Babel是一个构建工具-它应该只是构建过程的一部分。最常见的是，您将使用捆绑程序，例如webpack或browserify，它们可以使用babel将您的代码从ES6转换为ES5（或其他目标版本）。

在这里，您可以看到将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>

但是，您几乎永远不需要使用这种方法。