将 Babel 添加到 HTML

Question

我是 ReactJS 新手，在将 babel 导入 html 时遇到问题。目前该项目托管在代码笔link to code pen上。我正在尝试在本地主机上托管项目，并且很难将 babel 导入 html 而不会出现错误。当我使用 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 之类的脚本标签导入 babel 时，项目崩溃了。你能帮我弄清楚如何使用脚本标签导入 babel。

Answer 1

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

安装：

你可以使用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 团队构建的 React 应用初始化程序，可为您完成所有设置（包括 Babel 和 Webpack 配置）。

Answer 2

笔设置 > 快速添加 > 添加 React & ReactDOM > Javascript Preprocessor > 添加 Babel。你应该没问题。