javascript - 如何在不安装 babel 本身的情况下直接从脚本标签使用 babel

Question

我正在编写对从 cdnjs.com 引入的所有这些库的 react 。但是，我发现它报告错误:'Uncaught TypeError: Cannot read property 'keys' of undefined' 即使我不写一行 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 这样的 bundler ，它们可以使用 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>

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