摆脱 CDN 包中的 Babel(StandAlone) 警告消息

Question

我们在项目中的某些部分使用 React JS CDN。出于质量目的，我们希望向客户提供无警告代码。

我们正在使用以下库：

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

问题是我们在控制台中收到以下警告消息：

您正在使用浏览器内的 Babel 转换器。确保为生产预编译脚本

我们知道这不是什么大问题，但我们确实希望从我们的 Web 应用程序控制台中删除此警告。我们应该对代码进行任何更改，还是做其他事情？请指导，如何消除此警告信息。提前致谢。

Answer 1

Babel Standalone 旨在成为一种方便的工具，用于调试和讨论在线代码（例如 Stack Snippets 中的 Stack Overflow 上），但它的工作方法非常低效 - 它是一个大包，在浏览器中将 JSX 转换为 JS 占用了很大一部分客户端资源。

对于生产站点，这里最好的方法是按照警告的建议进行操作，而不是将 React 的 JSX 预编译为纯 JavaScript，以便您可以向客户端提供单个纯 JavaScript 文件。这样，代码只需在服务器端编译一次，而不是每次客户端加载页面时都在客户端编译一次。

要轻松开始此过程，请考虑create-react-app。您将需要 Node 和 NPM。

当您准备好部署到生产环境时，运行 npm run build 将在 build 文件夹中创建应用的优化版本。

那么你只需要提供服务，而不是让客户端依赖于下载和解析 React、React DOM 和 Babel Standalone。