从文档中，选择“在浏览器中”选项：

安装：

你可以使用babel/babel-standalone作为babel的预编译版本。

用法：

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

创建 .babelrc 配置文件：

伟大的！你已经配置了 Babel，但你还没有让它真正做任何事情。.babelrc在您的项目根目录中创建一个配置并启用一些插件。

首先，您可以使用env preset，它为 ES2015+ 启用转换：

npm install babel-preset-env --save-dev

为了启用预设，您必须在.babelrc文件中定义它，如下所示：

{ "presets": ["env"] }

请注意，以这种方式使用 Babel 的用例非常有限。我建议您至少使用Babel CLI来转换您的代码。或者，更好的是，使用Webpack 之类的构建工具在每次代码更改时运行 Babel。

另外，我建议您查看Create React App。它是由 React teamp 构建的 React 应用程序初始化程序，可为您完成所有设置（包括 Babel 和 Webpack 配置）。

笔设置 > 快速添加 > 添加 React 和 ReactDOM > Javascript 预处理器 > 添加 Babel。你应该没问题。