将 Babel 添加到 HTML

我是 ReactJS 新手，在将 babel 导入 html 时遇到问题。目前该项目托管在code pen上链接到代码笔 https://codepen.io/davedaw/pen/JJgvGK?editors=1010。我正在尝试在本地主机上托管该项目，但我很难将 babel 导入 html 而不会出现错误。当我使用 script 标签导入 babel 时，例如<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>项目崩溃了。你能帮我弄清楚如何使用 script 标签导入 babel 吗？

来自文档 https://babeljs.io/docs/setup/#installation，选择“在浏览器中”选项：

安装：

您可以使用babel/babel-独立 https://github.com/babel/babel-standalone#usage作为 babel 的预编译版本。

Usage:

<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 https://babeljs.io/docs/usage/babelrc在项目根目录中配置并启用 一些插件。

首先，您可以使用env preset https://babeljs.io/docs/plugins/preset-env/，这使得可以进行变换 ES2015+：

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

为了启用预设，您必须在您的.babelrc文件，像这样：

{ "presets": ["env"] }

请注意，以这种方式使用 Babel 的用例非常有限。我建议你至少使用巴别尔命令行界面 https://babeljs.io/docs/usage/cli来转换你的代码。或者，更好的是，使用像这样的构建工具Webpack https://webpack.js.org每次代码更改时运行 Babel。

Also, 我建议你看看创建反应应用程序 https://github.com/facebook/create-react-app。它是由 React 团队构建的 React 应用程序初始值设定项，可以为您完成所有设置（包括 Babel 和 Webpack 配置）。