如何直接从script标签使用babel而不安装babel本身

Question

我正在编写对从cdnjs.com引入的所有这些库的反应。但是，我发现它报告错误：'Uncaught TypeError：无法读取未定义的属性'键'，即使我不写一行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> 

Answer 1

包括浏览器巴贝尔是不是真的它应该工作的方式。

Babel是一个构建工具 - 它应该只是构建过程的一部分。大多数情况下，您可以使用像webpack或browserify这样的打包程序，它可以使用babel将您的代码从ES6转换为ES5（或其他目标版本）。

Here你可以看到你可以在构建过程中包含babel的所有不同方式。

这样，所有的处理都发生在你的机器/服务器上，你不需要在客户端包含babel，因为它只能接收它可以理解的传输代码。

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

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

但是，你几乎不需要使用这种方法。