Question

我写的是对cdnjs.com引入的所有lib的反应。但是，我发现它报告错误：＆＃39;未捕获的TypeError：无法读取属性＆＃39;键＆＃39;未定义的＆＃39;即使我不写一行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并不是它应该工作的方式。

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>

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

Answer 2

您可以为此Link

独立使用babel

        <div class="feedback-wrapper"> 
         ...
            </div>

            <div class="arrow-wrapper">
            <i class="fas fa-chevron-right" id="arrow-feedback" ></i>
         <i class="fas fa-question" id="toggle-feedback"></i>
    </div>
  </div>

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

2 个答案: