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

How to use babel directly from a script tag without installing babel itself(如何在不安装Babel本身的情况下直接从脚本标记使用Babel)

本文介绍了如何在不安装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>

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

这篇关于如何在不安装Babel本身的情况下直接从脚本标记使用Babel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

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

基础教程推荐