将Babel添加到HTML

Question

我是 ReactJS 的新手，遇到了将 babel 导入 html 的问题。目前该项目托管在 CodePen 链接到CodePen 上。我正在尝试将项目托管到本地主机，并且在不出错的情况下导入 babel 很困难。当我使用 script 标签导入 babel，如 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 时，项目会崩溃。你能帮我解决如何使用 script 标签导入 babel 的问题吗？

- user9248590

---

你愿意使用 Webpack 吗？ - Nandu Kalidindi

Answer 1

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

（意为：根据文档，在浏览器中选择“in the browser”选项。）

Installation:

You can use babel/babel-standalone as a precompiled version of 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>

Create .babelrc configuration file:

Great! You've configured Babel but you haven't made it actually do anything. Create a .babelrc config in your project root and enable some plugins.

To start, you can use the env preset, which enables transforms for ES2015+:

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

In order to enable the preset, you have to define it in your .babelrc file, like this:

{ "presets": ["env"] }

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

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

- GG.

Answer 2

笔设置 > 快速添加 > 添加React和ReactDOM > Javascript预处理器 > 添加Babel。你应该可以搞定。

- izengod

---

我知道这个。我正在将我的主机从CodePen更改为本地机器，这意味着我可以像你建议的那样添加Babel。 - user9248590