将 ReactJS 构建/编译/部署到生产环境的最佳方法 [关闭]
Posted
技术标签:
【中文标题】将 ReactJS 构建/编译/部署到生产环境的最佳方法 [关闭]【英文标题】：Best way to build/compile/deploy ReactJS to production [closed] 【发布时间】：2016-09-06 06:32:30 【问题描述】：我是 reactJS 新手，正在尝试了解将代码部署到生产环境的最佳方式。根据下面的链接，我正在使用 babel 作为下面的代码进行构建，但我想知道这是否很好，或者是否有任何其他最佳实践围绕将 ReactJS 部署到生产环境：
npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react
babel --presets es2015,react --watch src/ --out-dir dist
http://www.sitepoint.com/getting-started-react-jsx/
这是我的 index.html 和 main.js 文件：
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Resources prototype</title>
<!-- React / Babel / Jquery Libraries -->
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="main.js"></script>
</body>
</html>
main.js
var First = React.createClass(
render: function()
return (
<div className="First">
Hello, world!
</div>
);
);
ReactDOM.render(
<First />,
document.getElementById('content')
);
【问题讨论】：
生产中的 React 应该在服务器端渲染，并包含用于客户端渲染动态组件的 JS 文件。您甚至将不再拥有index.html 文件，因为这一切都将通过 React 组件完成，并在发送到客户端之前呈现为字符串。在我的团队决定选择另一个平台之前，我在这个非常好的 repo github.com/mhart/react-server-example 的帮助下成功地在我们的环境中实现了这一点
【参考方案1】：
我建议使用 Webpack 来捆绑您的代码。它会将您的整个应用程序整合到一个文件中（如果您进一步优化 webpack，则可以将其整合到一个文件中）。然后，您可以拥有一个非常基本的 index.html 文件，该文件仅加载捆绑的 js 文件。以您喜欢的任何方式将其推送到您的生产服务器。
这里有一个很好的教程可以帮助你开始使用 Webpack：Setting up React for ES6 with Webpack and Babel（如果你不喜欢这个，这里有很多）
目前 React 面临的挑战之一是捆绑包的大小超出最佳范围。对于复杂的应用程序，这可能会成为初始页面加载的问题。进入同构渲染。 React 可以在服务器端运行并呈现快速下载的应用程序快照。然后，当您的实际应用程序包下载时，它会与当前的 DOM 无缝连接，从而在它们到达您的页面时提供更快捷的用户体验。
这是一个使用 React 进行同构渲染的示例：Example on Github
在 Google 中抛出“ReactJS 同构渲染”以获取更多信息。 祝你好运，玩得开心 - 这是很酷的东西:)
【讨论】：
以上是关于将 ReactJS 构建/编译/部署到生产环境的最佳方法 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
Angular (8) 应用程序构建一次（使用生产配置）并部署到多个环境